Search for a command to run...
![[ 살펴보기 ] - Zustand](https://cdn.hashnode.com/res/hashnode/image/upload/v1723605158229/9dbe5359-5f59-4d59-b7ad-d405e904cfef.jpeg)
Series
Global State Management library Zustand에 대해 살펴보자
귀여운 곰이 우리를 반겨주는 Global state management library인 zuzstand를 살펴보자. Zustand는 전역으로 관리될 state와 state를 조작하기 위한 action을 통해 store를 구성하고 구성된 store를 hook 형식으로 간편하게 사용하며 전역 state를 관리한다. 우선 간단한 store를 생성해보자. import { create } from "zustand"; type State = { n...
![[ 살펴보기 ] Zustand - Store](https://cdn.hashnode.com/res/hashnode/image/upload/v1723691732449/580cacca-b13d-436e-99f5-27d9aadf6a8a.jpeg)
Middleware를 통해 Zustand store에 우리가 필요로하는 추가 로직을 적용할 수 있다. zustand 자체에서 제공하는 middleware도 있고 third-party로 제공되는 많은 middleware가 존재하지만 그 중에서 자주 쓰이는 middleware를 살펴보자. Immer middleware immer middleware를 적용하여 불변성을 보다 쉽게 유지하며 store update를 할 수 있다. 우선 immer mid...
![[ 살펴보기 ] Zustand - Middleware](https://cdn.hashnode.com/res/hashnode/image/upload/v1724055627327/8041147b-9ebb-4b21-b0f2-6219b5126d84.jpeg)
Official Documentation에 따르면 Zustand를 NextJS와 함께 사용할 때 여러 request에 store가 공유되는 것을 방지하지 위해 React Context를 통해 store를 전달하고 사용하는 방식을 소개하고 있다. 따라서 NextJS에서 Zustand를 사용하고자 한다면 store의 생성과 사용을 위해 다음 과정을 적용하는 것이 추천된다. ( 예제는 NextJS App route 기준으로 적용 ) 우선 store를...
![[ 살펴보기 ] Zustand - NextJS에서 사용하기](https://cdn.hashnode.com/res/hashnode/image/upload/v1724385805468/144389eb-236f-4e7b-88f4-984c88447cbe.jpeg)