[React] Zustand 기본 사용법 정리

들어가며

React 프로젝트가 커지면 여러 컴포넌트에서 같은 상태를 공유해야 하는 상황이 생깁니다.

props로 계속 내려보내면 props drilling이 생기고, Context API만으로 관리하면 상태가 많아질수록 구조가 복잡해질 수 있습니다.

Zustand는 이런 전역 상태를 가볍고 단순하게 관리할 수 있게 도와주는 라이브러리입니다.

---

설치하기

npm install zustand

yarn을 사용한다면 다음 명령어로 설치할 수 있습니다.

yarn add zustand

---

기본 store 만들기

// store/useCounterStore.ts
import { create } from "zustand";

interface CounterState {
  count: number;
  increase: () => void;
  decrease: () => void;
  reset: () => void;
}

export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

create로 store를 만들고, 그 안에 상태와 상태를 변경하는 액션 함수를 정의합니다.

---

컴포넌트에서 사용하기

import { useCounterStore } from "@/store/useCounterStore";

const Counter = () => {
  const { count, increase, decrease, reset } = useCounterStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
      <button onClick={reset}>reset</button>
    </div>
  );
};

export default Counter;

이제 어느 컴포넌트에서든 useCounterStore를 호출해 같은 상태를 공유할 수 있습니다.

---

필요한 상태만 구독하기

컴포넌트에서 store 전체를 가져오면 store 안의 다른 값이 바뀔 때도 렌더링에 영향을 줄 수 있습니다.

필요한 값만 선택해서 구독하면 더 효율적입니다.

const count = useCounterStore((state) => state.count);
const increase = useCounterStore((state) => state.increase);

이렇게 작성하면 해당 컴포넌트는 자신이 선택한 값의 변경에만 반응합니다.

---

Zustand의 장점

Zustand는 별도의 Provider로 앱을 감싸지 않아도 사용할 수 있습니다.

또한 store 코드가 비교적 짧고, 상태와 액션을 한곳에 모아두기 쉽습니다.

작은 프로젝트부터 중간 규모 프로젝트까지 부담 없이 적용하기 좋습니다.

---

마무리

Zustand는 React에서 전역 상태를 간단하게 관리할 수 있는 라이브러리입니다.

create로 store를 만들고, 컴포넌트에서는 만들어진 hook을 호출해 상태와 액션을 사용합니다.

상태가 많아질수록 필요한 값만 선택해서 구독하는 습관을 들이면 렌더링 관리에도 도움이 됩니다.