diff --git "a/5\354\236\245/\354\232\260\354\260\275\354\231\204.md" "b/5\354\236\245/\354\232\260\354\260\275\354\231\204.md" new file mode 100644 index 0000000..dd4b10c --- /dev/null +++ "b/5\354\236\245/\354\232\260\354\260\275\354\231\204.md" @@ -0,0 +1,73 @@ +# 리액트와 상태 관리 라이브러리 + + + + + + + +## 5.1 상태 관리 라이브러리들 역사 + +### Flux 패턴의 등장 + +단방향 상태 관리 패턴으로 복잡성 완화 + +* 대표 라이브러리: Flux + +### 리덕스의 등장 + +리덕스는 flux와 Elm 아키텍쳐의 조합 + +Elm이란?: 데이터를 모델, 뷰, 업데이트로 구분하는 방식 + +### tanstack-query, zustand + +최근에는 서버 상태 관리를 react-query, 클라이언트 상태 관리를 zustand, redux 등으로 나누어 관리하는 것이 일반적 + + + + + +## 5.2 직접 상태 관리 모듈 만들어보기 + +* 358page subscribe 잘 이해를 못함(subscribe와 useEffect unsubscribe가 어떻게 동작하고 있는지?) +* 362p => selector로 특정 상태만 useState에 저장해서 원하는 값만 구독 가능 + + + +* redux와 zustand 상태 관리 라이브러리를 바닐라로 작성되어 있고, 리액트와 상태 주기를 맞추기 위해서 useSyncExternalStore를 의존하고 있음(367p - useSubscription) +* ![image-20240109221141909](/Users/uchang-wan/Library/Application Support/typora-user-images/image-20240109221141909.png) + +* useSyncExternalStore + + ![image-20240109221010373](/Users/uchang-wan/Library/Application Support/typora-user-images/image-20240109221010373.png) + + + +* 370p => context를 사용할 경우, 매번 스토어를 안 만들고 context로 상태 공유를 한다. + + + + + +### 5.2.4 상태 관리 라이브러리 Recoil, Jotai, Zustand + +#### Recoil + +개발 거의 중단 상태 + +이전에 컨퍼런스 recoil의 동시성과 suspense지원 때문에 recoil이 유일한 선택지였다고 본 것 같은데.. 어떤 부분에서 suspense와 결합하여 사용하는지 이해가 잘 안된다... + +https://www.youtube.com/watch?v=0-UaleJZOw8 + +Recoil 써본 분 헬프.. + + + +#### Jotai - 패스 + +#### Zustand + +* zustand는 구독, 발행 패턴으로 상태 관리 - (구독, 발행 패턴 ... 다음에 코드 작성해보기......) +* useSyncExternalStore로 리액트로 상태 주기 공유 +