상태관리 라이브러리/zustand (2) 썸네일형 리스트형 [zustand] zustand 저장소 구조의 기본 템플릿(타입스크립트를 기준으로) 저스텐드(zustand)는 redux에 비해 보일러 플레이트가 적지만, 그럼에도 중앙 집중식 저장소라는 특성 상, 어느정도 기본 구조를 잡아주어야 한다. 이 글은 내가 자주 사용하는 저스텐드 기본 구조 템플릿이다. 디렉토리 위치먼저 중앙 저장소가 될 파일을 만들자.이름은 mainStore.ts로 한다.일반적인 모듈 아키텍처라면, data/store/mainStore.ts에 만든다.FSD나 도메인 레이어 아키텍처라면, 가장 하위 레이어에 만든다. 예컨대, 최하위 레이어가 shared 라면 shared/data/store/mainStore.ts 이다. data 폴더는 전역에서 공유하는 상태를 다룬다. context 혹은 zustand의 중앙저장소 및 유틸 훅을 보관한다. mainStore.ts 의 구조중앙.. [zustand] zustand 컨셉 및 기본 사용법 컨셉zustand는 redux, zotai, valtio, recoil 등과 더불어 대표적인 상태 관리 라이브러리 중 하나다. zustand의 특징은 다음과 같다 flux 디자인 기반 - 중앙 집중식 상태 관리 | redux와 유사하게 state를 단일 store에서 관리하며 dispatcher는 중앙에서 정의된 메소드를 사용한다.선택적 reducer | redux는 모든 dispatch 요청을 reducer 함수 내에서 action.type에 따라 분기처리하는데 반해, zustand는 선택 사항에 따라 그러지 않을 수 있다. 대신, 여러 개의 메소드 중 하나를 선택하여 dispatch 한다.불변 상태 관리 | redux처럼 불변식 상태관리 방식을 사용하며, 복잡한 상태 관리에는 immer과 조합이 좋.. 이전 1 다음