Zustand 사용기

Zustand를 사용하는 이유

프로젝트에서 닉네임을 보내주는 api 로직이 하나인데, 닉네임을 다른 컴포넌트에서도 띄워야 했다. 그렇기에 해당 값을 전역적으로 관리할 필요를 느꼈고, 이에 따라 상태관리 라이브러리를 도입하게 됐다.

 

상태관리 라이브러리를 처음 사용해보는 만큼, 간단하고 빠르게 사용할 수 있다는 Zustand로 결정하게 되었다.

 

 

 

https://zustand-demo.pmnd.rs/

Zustand

주스탠드 공식문서를 참고했다.

 

 

 

 

 

사용법

npm install zustand

Zustand를 설치해 준다.

 

 

 

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, inc } = useStore()
  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

 

공식문서의 사용 예시이다.

 

1.  Zustand로부터 create를 import 해주고, store를 생성해 준다.

2.  count라는 초기 값을 생성해 주고, inc 함수를 통해 count를 1 증가시킨다.

3.  counter 컴포넌트에서 useStore를 통해 생성한 값들을 받아온다.

4.  해당 값들을 렌더링 한다.

 

 

 

CSS가 없어서 이 모양이지만, 아무튼 정상 작동하는 것을 확인할 수 있다. 리덕스를 아주 약간 배워봤던 경험이 있는데, 확실히 훨씬 더 편하고 간단하다. 

 

 

 

 

 

예시 연습

입력에 따라 이름과 나이가 변하는 예시를 연습해 봤다. 왼쪽이 zustand로 만든 Store이고, 오른쪽이 App 컴포넌트이다. 

 

 

 

1. useInfo State를 선언하고 zustand Store로부터 초기 값을 받아온다. 

2. onChange 핸들러를 만들어서 이름과 나이의 변경 값을 추적하고 useInfo State에 저장한다.

3. 마지막으로 버튼을 눌렀을 때 useInfo의 정보를 Store의 업데이트 함수로 넘겨준다.

 

 

 

버튼을 눌렀을 때 잘 적용되는 것을 확인할 수 있다.

 

하지만 새로고침을 했을 때, 초기화되는 문제가 있다. 이러면 닉네임을 받아와서 저장해도 의미가 없다. 새로고침 해도 값이 유지되어야 한다.

 

 

 

 

Zustand의 persist

https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md

persist라는 미들웨어를 사용하면 zustand의 값을 localStorage 등에 저장할 수 있다고 한다.

 

 

 

persist(()=> (), { })

형식으로 사용한다.

 

 

 

미들웨어로부터 persist를 import 해주고, persist를 적용했다. persist를 사용해서 스토리지에 저장하면 기본적으로는 localStorage에 저장된다. 또한 name은 Zustand 상태를 저장소에 저장하는 데 사용되는 키가 되므로 고유해야 한다.

 

 

 

persist를 적용 후 기본적으로 localStorage에 값이 올라간 것을 확인할 수 있다.

 

 

 

값을 변경하면 변경한 값이 그대로 localStorage에 올라가고, 새로고침해도 값이 변하지 않는 것을 확인할 수 있다.

 

 

 

 

 

 

zustand 쩔어! 왜 진작 쓰지 않았을까 싶다. 한편으로는 어떻게 해야 잘 쓸 수 있을까 싶기도 하고! 닉네임만 받으려고 쓰기에는 뭔가 아깝다는 느낌이 들었다. 뭔가.. 뭔가.. 더 잘 쓸 수 있을 거 같은데.. 그건 일단 생각해 보는 걸로~