[ React ] Zustand로 상태 관리하기 🐻 (with. Typescript)

Zustand란?

Zustand는 독일어로 '상태'라는 뜻을 가진 작고 빠르며 확장 가능한 상태 관리 라이브러리이다.

Zustand는 사용법이 간단하고, Redux나 Recoil과 달리 앱을 감싸는 별도의 provider가 없어도 상태 관리가 가능하다.
또, context api 를 이용하여 상태 관리를 할 때 발생하는 리렌더링은 context 분리, memoization 등을 통해 해결해야 한다. 반면 zustand를 이용하면 상태 변경 시 불필요한 리렌더링을 쉽게 방지할 수 있다.

( 공식문서 | 유사한 상태관리 라이브러리와 비교 )

Zustand의 특징
- 특정 라이브러리를 강제하지 않는다.
- 한 개의 중앙에 집중된 형식의 스토어 구조를 활용한다.
- 상태를 정의하고 사용하는 방법이 단순하다.
- 사용이 간편하며, 보일러플레이트 코드가 아주 적다.
- 상태 변경 시 불필요한 리렌더링을 쉽게 방지하고 provider hell 문제 또한 해결할 수 있다.

---

Zustand 시작하기

설치

프로젝트 루트 위치에서 명령어를 이용하여 설치

// NPM
npm install zustand

//Yarn
yarn add zustand

기본적인 사용법

create 함수를 이용하여 스토어를 생성해준다.

// store.ts
import create from "zustand";

// store의 타입을 정의해준다.
interface Store {
  data : string;
  setData : () => void;
}

// store를 create
const useStore = create<Store>((set) => ({
  data : '',
  setData : (newData) => set((state) => ({data : newData})
}));

export default useStore;

이후 사용을 원하는 컴포넌트에서 selector 함수를 전달하여 훅을 사용한다.

function Component() {
  const data = useStore((state) => state.data);

  return <div> 여기에 가져온 데이터가 표시 됩니다 : {data} </div>
}

function Controls() {
  const setData = useStore((state) => state.setData)
  return <button onClick={setData(newData)}> 새로운 데이터를 넣어줍니다. </button>
}

( 공식문서 | Zustand 사용 가이드 )