[TIL] 230620

React 심화과정

DOM vs Virtual DOM

virtual DOM은 react에서 사용하는 것인데, DOM을 복사하여 메모리에 js객체로 저장해서 조작하기 때문에 빠르다.
2개를 복사하고 하나는 갱신 전, 하나는 갱신 후
Painting작업이 가장 오래걸리는데 이것을 한번으로 줄일 수 있어서 react가 효율적이다.

Redux

상태관리 라이브러리
상태를 전역으로 다루는 것과 비슷하다(context)
context의 단점 중 provider가 가지고 있는 상태가 하나라도 변경되면 리렌더링이 발생하여 redux가 나왔다.

yarn add redux react-redux
// 2개 설치해야 한다.

• 폴더 구조
  

    src -> redux -> config 
    						 -> modules

Store: Reducer + State → UI(컴포넌트) → Dispatch(Action객체를 가지고) → Store

Store는 action 객체 type에 따라 state를 변경한다.

완강 후 TODO 페이지를 구현해보면서 익히는 시간이 필요하다.