프론트엔드
상태 관리 라이브러리 Zustand
두줄요약
Zustand의 상태 관리가 클로저와 React의 external store 구독으로 동작하는 방식을 설명했습니다. 또한 tearing 문제와 useSyncExternalStore의 역할을 통해 내부 원리를 따라 만들어 보았습니다.
핵심 내용
- Zustand의 상태 관리 구조를 클로저 기반으로 설명
- createStore, setState, subscribe, getState의 관계와 역할 정리
- React 18의 external store 구독을 위한 useSyncExternalStore 연동 방식 설명
- tearing 문제와 이를 피하기 위한 상태 구독 원리 분석
구조와 흐름
- create 함수가 createStore를 호출해 초기 state와 변경 로직 구성
- subscribe로 listeners를 등록하고 setState 시 일괄 실행
- useSyncExternalStoreWithSelector가 변경 감지와 리렌더링 연결
적용해볼 점
- 상태 관리 라이브러리도 내부 동작 원리까지 함께 이해할 필요성
- external store와 React 18 Concurrency 조합에서의 일관성 검토
- 직접 구현을 통해 store, 구독, 리렌더링 흐름 점검