클라이언트에서 전역 상태관리는 항상 오늘날과 같지는 않았습니다. 저는 우리의 최선의 선택이 Redux와 고차 컴포넌트를 사용하여 connect와 mapStateToProps, mapDispatchToProps를 사용했던 때를 기억합니다.
컨텍스트 API도 처음에는 render props만 지원했기 때문에 사용하기에 인체공학적이지 않았습니다.(말장난 의도)
물론 훅이 출시되면서 모든 것이 바뀌었습니다. 기존 솔루션이 훨씬 사용하기 쉬워졌을 뿐만 아니라 새로운 솔루션이 탄생했습니다.
내가 빠르게 좋아하게 된 것 중 하나는 Zustand였습니다. 글로벌 상태 저장소를 생성하고 selector를 통해 구독하는 간단한 API를 제공하는 작은 라이브러리(v4.1.4는 1.1kB Minified + Gzipped)입니다. 이 패턴은 많은 개발자에게 이미 알려진 Redux가 하는 일과 개념적으로 유사합니다.
React 자체와 마찬가지로 Zustand는 독단적이지 않습니다. 여러분이 원하는 경우 immer와 결합할 수 있습니다. 여러분은 액션을 디스패치할 수 있지만 반드시 그럴 필요는 없습니다. Zustand는 강력한 미들웨어가 있지만 이것 또한 선택사항입니다.
나는 이 라이브러리를 좋아합니다. Zustand는 시작하기 위한 최소한을 제공하며 필요에 따라 유연하게 확장할 수 있습니다. 그러나 React가 스타일링을 수행하는 방법을 규정하지 않는 방식과 유사하게 스스로 결정을 내려야 합니다.
또한 Zustand는 마법이 아닙니다. 일부 유사한 라이브러리처럼 사용 중인 필드를 추적하지 않습니다. selector로 “수동”으로 구독해야 합니다. 그리고 제 경험상 그것은 좋은 것 입니다. 왜냐하면 그것은 여러분이 의존성에 대해 매우 명시적이 되도록 강요하기 때문입니다. 작성해야할 것이 좀 더 많더라도 앱이 성장함에 따라 보상을 받을 수 있습니다.
저는 2018년부터 크고 작은 프로젝트에서 Zustand와 함께 일해 왔습니다. 저는 또한 라이브러리에 약간의 기여를 했습니다. 그 과정에서 얻은 몇 가지 팁은 다음과 같습니다: