Zustand 너 뭐 됨?

문강현·2025년 11월 17일

시작하며

오늘은 리액트의 상태관리 라이브러리 중 하나인 Zustand에 대해 알아보도록 하겠습니다!

상태관리...? 너 뭔디

Zustand에 대해 알아보기 전에 상태관리에 대해 알아 보도록 하겠습니다.
상태(state)는 리액트 컴포넌트속 데이터를 의미 합니다.
이러한 상태는 시간에 따라, 사용자와의 상호작용에 따라 업데이트되며, 이렇게 변화하는 상태를 올바르게 반응하게 해주는 관리를 상태 관리라고 합니다.

왜 필요함?

복잡한 시스템 관리
프로젝트 규모가 커질수록 각 상태를 개별적으로 추적하고 관리하는 것은 매우 비효율적입니다. 상태 관리는 여러 컴포넌트에서 공유되는 데이터를 중앙에서 일관성 있게 관리하게 해줍니다.
성능 최적화
리액트는 상태가 변경되면 해당 컴포넌트와 그 하위 컴포넌트를 리렌더링합니다. 적절한 상태 관리는 상태 변경에 따라 필요한 컴포넌트만 선택적으로 리렌더링하도록 제어하여 성능 저하를 막아줍니다.
Props Driling 문제 해결
부모 컴포넌트에서 자식컴포넌트로 props를 전달 할때 코드가 복잡해지면서 Props Driling 현상이 발생하는데 이때 상태관리 라이브러리를 사용 하면 직접 접근을 하여 이러한 현상을 막을 수 있다.

Zustand

리액트에서 사용 할 수 있는 가볍고 빠른 상태관리 라이브러리 입니다.

현재 까진 리덕스보다 다운로드 수가 더 적지만, 최근 1년으로 본다면 Zustand가 급격히 성장하고 있습니다.
왜 그럴까요? 너 뭐 되냐 Zustand?!!

그래서 왜씀?

결론부터 말하면 뭐 됩니다...ㄷㄷ

설치용량 작음
가볍습니다 다른 라이브러리에 비해 설치 용량이 적음 1.1kb입니다
불필요한 리렌더링이 적어서 빠름
사용법이 쉬움
리액트 밖에서도 사용가능
Redux는 리액트에 묶여있는 느낌이지만 Zustand는 순수 js 라이브러리여서 리액트 밖에서도 사용 가능 합니다.
코드가 깔끔해짐
전역 상태 로직이 하나의 store 안에 정리되기 때문에
프로젝트 규모가 커져도 유지보수가 쉬워집니다

이때 store는 애플리케이션의 여러 상태(State)를 중앙에서 관리하는 패턴을 말합니다

기본 사용법

설치

npm install zustand

store 만들기

Zustand는 create() 함수를 사용해 전역 상태 store를 만듭니다.

import { create } from "zustand";

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

create() : Zustand store를 만드는 함수
set : 상태를 업데이트할 때 사용하는 함수
count : 전역 상태로 관리할 값
increase, decrease : 상태를 변경하는 액션 함수

즉, 전역에서 공유 가능한 useState라고 보면 이해가 쉽습니다.

컴포넌트에서 사용하기

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

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  );
}

useCounterStore()를 호출하면 store에 있는 상태와 함수를 가져올 수 있습니다.
count 값이 바뀌면 이 컴포넌트만 리렌더링됩니다.
불필요한 렌더링을 막아 성능이 좋습니다.

selector

function Counter() {
  const count = useCounterStore((state) => state.count);
  const increase = useCounterStore((state) => state.increase);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
    </div>
  );
}