zustand

리액트 프로젝트를 진행하면서 상태 관리를 어떻게 해야 할지 고민이 많았습니다.
초기에는 리액트 자체 상태 관리 도구인 useContext와 useState를 사용하려 했지만, 페이지가 복잡해지고 부모 컴포넌트가 비대해지는 문제를 겪게 되었습니다.
그래서 상태 관리 라이브러리를 도입하기로 결심했습니다.

이번 글에서는 제가 Zustand를 선택한 이유와 사용 후기를 공유하겠습니다~~

 

왜 Zustand를 선택했는가?

상태 관리 도구로 널리 알려진 Redux를 사용할까 고민도 했지만, Zustand를 선택하게 된 이유는 다음과 같습니다.

1. 단순한 구조
   Redux처럼 store, slice, action 등을 따로 관리하는 복잡한 구조 대신, 하나의 store 파일에서 모든 상태를 관리할 수 있습니다. 이 점이 Zustand를 도입하는 가장 큰 이유가 되었습니다.
2. 가벼운 라이브러리
   Zustand는 매우 가벼운 상태 관리 라이브러리입니다. React와 완벽히 통합되면서도 코드가 간결해져 생산성을 높여줍니다.
3. 강력한 기능
   Zustand는 단순하지만, 비동기 상태 관리나 미들웨어 통합과 같은 고급 기능도 제공합니다.

 

1. 설치하기

먼저, Zustand를 프로젝트에 설치합니다.

npm install zustand
or
yarn add zustand

2. Store 생성하기

Zustand의 store는 단일 파일에서 상태를 정의하고 관리합니다.

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0, // 초기 상태
  increase: () => set((state) => ({ count: state.count + 1 })), // 상태 증가
  decrease: () => set((state) => ({ count: state.count - 1 })), // 상태 감소
}));

export default useStore;

3. 컴포넌트에서 상태 사용하기

Zustand의 store는 useStore 훅을 통해 사용할 수 있습니다.

import React from 'react';
import useStore from './store';

const Counter = () => {
  const { count, increase, decrease } = useStore();
  
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increase}>+ Increase</button>
      <button onClick={decrease}>- Decrease</button>
    </div>
  );
};

export default Counter;

 

저는 조금  더 복잡한 상태관리를 했습니다. 소스코드가 길어져도 어느 컴포넌트에서 사용하는지 구분을 해놓아서 정말 누가봐도 이해할 수 있게 정리가 가능합니다. Redux도 충분히 가능하나 Redux는 zustand와 같이 분리되어있지 않고 slice안에 reducers라는 곳에서 관리를 하기 때문에 처음 보는 입장에서 힘들 수도 있을 것 같습니다. 하지만, zustand는 처음보는 백엔드 개발자들도 쉽게 이해하고 볼 수 있었습니다.

사용 후기

zustand는 redux에 비해 간결한 코드작성이 가능합니다. 또한, 한 파일에 존재하므로 유지보수 및 업데이트가 간편해집니다.

처음 보는 사람도 단 번에 이해할 수 있습니다.(실제 백엔드 개발자들도 금방 알 수 있었습니다.)

 

Zustand를 추천하는 이유

Zustand는 특히 소규모 프로젝트나 상태 관리가 비교적 단순한 프로젝트에서 빛을 발합니다.
Redux처럼 복잡한 설정 없이도 필요한 기능을 빠르게 구현할 수 있어 개발 시간을 단축할 수 있습니다.