[10분 테코톡] 익셉의 전역 상태 라이브러리 직접 구현하기
- 전역 상태 라이브러리의 핵심은 상태 변경과 구독 알림이다. 📢
- 리액트 외부의 Store 모듈은 전역 상태를 보관하고, 최신 상태를 반환/업데이트하며, 상태 변경을 구독자에게 알린다. 📦
- useStore 훅은 Store와 컴포넌트를 연결하여 상태 변화를 감지하고 리렌더링을 트리거한다. 🔗
- Store는 getState, setState, subscribe 메서드를 통해 상태 관리 및 구독자 관리를 수행한다. 🛠️
- setState는 함수 형태의 상태 갱신을 허용하여 리액트의 상태 업데이트 방식을 지원한다. ⚙️
- subscribe 메서드는 상태 변경을 관찰하는 컴포넌트에게 알림을 제공하고, 클린업 함수를 통해 구독을 해제한다. 🔔
- useStore 훅은 useState와 useEffect를 활용하여 최신 상태를 유지하고 구독을 관리한다. 🎣
- useStore의 한계인 불필요한 리렌더링을 해결하기 위해 selector를 사용하여 상태의 일부분만 반환한다. ✂️
- useSyncExternalStore 훅은 외부 Store와 동기화를 맞추는 데 사용되며, subscribe와 getSnapshot을 인자로 받는다. 🔄
- Zustand 라이브러리의 코드는 직접 구현한 라이브러리와 매우 유사하며, Zustand 코드 분석을 통해 깊이 있는 이해를 얻을 수 있다. 🔍
- Zustand 또한 useSyncExternalStore 훅을 동일하게 사용하고 있다. 💯
- '마이크로 상태 관리' 책을 통해 전역 상태 관리의 원리를 더 깊이 이해할 수 있다. 📚