KassyLog

react 기본 다시 정리해보기! 본문

react

react 기본 다시 정리해보기!

Kassy_kim 2024. 2. 28. 22:08



  1. DOM과 Virtual DOM이란?
    DOM은 document object model의 약자로 말 그대로 문서객체모델인데 자바스크립트가 이용할 수 있는 객체를 의미한다. (div a input …)
    Virtual DOM은 말 그대로 가상돔을 의미하는데 실제돔의 복제본으로 돔은 브라우저가 화면을 그리는데 모든 정보가 다 들어있기때문에 조작하는 작업이 무거운데 (수정될 때 마다 렌더트리가 계속해서 실시간으로 갱신 됨)리액트에서는 가상돔을 만들어서 관리하며 성능을 보다 효율적이게 한다.
    가상돔을 활용하면 직접 돔을 조작하지 않고 최초의 돔의 상태를 메모리에 기억하고 변경이 있을 경우 해당 변경 사항만 반영하는 것이다.

  2. 리액트의 특징은?
    가상돔을 활용하여 보다 성능을 가볍게 할 수 있다.
    컴포넌트를 쉽게 재사용가능하기 확장성이 뛰어나며 재사용성과 유지보수성을 높여준다.
    자바스크립트와 XML을 조합한 JSX 문법을 사용한다. JSX는 컴포넌트의 구조와 동작은 ‘왜’에 집중하는 ‘선언적’으로 작성할 수 있게 도와준다.

  3. flux 패턴이란?

편리한 UI 디자인 워크플로우를 위해 프론트엔드에서 사용되는 아키텍처 패턴이다.
MVC패턴(양방향으로 데이터가 흐르는데 이는 데이터의 흐름을 예측하기가 점점 힘들어지고, 수많은 버그를 발생시키는 원인)과는 다르게 단방향의 데이터 흐름을 가지고 있다.
사용자 입력을 기반으로 action을 생성하고 이를 dispatcher(허브라고 생각하면 편함)에 전달하여 store에서 데이터를 변경하고 view에 반영한다.



 

[출처] :  https://www.tcpschool.com/react/react_redux_intro

'react' 카테고리의 다른 글

리코일  (0) 2023.03.27
리액트 쿼리  (0) 2023.03.27
emotion과 styled-components  (0) 2023.03.26
craco란?  (0) 2022.12.16
Refresh Token  (0) 2022.12.15