Published On: 2024년 5월 18일

상태관리 라이브러리 Zustand

Zustand 소개

Zustand는 간단하고 사용하기 쉬운 상태 관리 라이브러리로, 사용자가 최소한의 설정으로 글로벌 상태를 관리할 수 있게 합니다. 이 라이브러리는 불필요한 리렌더링을 피하고 간단한 API로 상태 관리를 구현할 수 있습니다.

주요 특징

간단함: 최소한의 설정으로 상태 관리 가능.
효율성: 불필요한 리렌더링을 최소화하여 성능 최적화.
직관적 API: 상태 생성 및 업데이트가 직관적.
선택적 리렌더링: 상태의 일부만 구독하여 특정 컴포넌트만 리렌더링 가능.

Zustand와 Redux Toolkit 비교

특징	Zustand	Redux Toolkit
설정 용이성	매우 간단, 최소한의 설정	비교적 복잡, 초기 설정 필요
API 복잡도	간단하고 직관적	약간 복잡하지만 구조화됨
보일러플레이트 코드	거의 없음	줄었지만 여전히 존재
성능 최적화	매우 효율적, 불필요한 리렌더링 최소화	최적화 가능하지만 직접 설정 필요
미들웨어	기본적으로 미들웨어 없음	다양한 미들웨어 지원
디버깅 도구	기본 제공 안 함	Redux DevTools와 통합
비동기 작업 처리	자체 비동기 처리 (optional)	`createAsyncThunk` 사용
유연성	매우 유연, 제한 없음	구조화된 패턴 따름
타입스크립트 지원	기본적인 타입 지원	뛰어난 타입스크립트 지원

Zustand는 설정이 간단하고 API가 직관적이어서, 작은 프로젝트나 상태 관리가 간단한 애플리케이션에 적합합니다. 반면, Redux Toolkit은 대규모 애플리케이션에서 복잡한 상태 관리를 필요로 할 때 유용하며, 구조화된 패턴과 다양한 미들웨어 지원으로 더 나은 확장성을 제공합니다.

Zustand 사용 방법

Zustand를 사용하여 간단한 상태 관리를 구현하는 방법을 살펴보겠습니다.

# Zustand 설치
npm install zustand

상태 변경 함수: 상태 변경 함수를 정의할 때, 항상 set 함수를 사용하여 새로운 상태를 설정합니다.

상태 구독: 특정 상태를 구독하여 해당 상태가 변경될 때만 컴포넌트를 리렌더링 할 수 있습니다.

미들웨어 사용: Zustand는 미들웨어를 통해 상태를 영구 저장하거나 디버깅 도구와 통합할 수 있습니다. 필요에 따라 persist, devtools 등의 미들웨어를 활용할 수있습니다.

Zustand 주요 함수와 훅

create

create 함수는 Zustand 스토어를 생성하는 데 사용됩니다. 이 함수는 필수적으로 사용되며, Zustand의 핵심 함수입니다.

useStore는 Zustand 스토어의 상태와 함수를 가져오기 위해 사용하는 훅입니다.

일반적으로 create 함수에서 반환된 훅입니다. - 이름을 꼭 useStore라고 지을 필요는 없습니다.

store.tstypescript

// 예제로 공식홈페이지의 코드를 살펴보겠습니다.
// 곰의 수를 증가시키고 리셋하는 기능을 구현합니다.
import { create } from 'zustand'

// Zustand 상태관리 스토어를 생성합니다.
const useStore = create((set) => ({
  // bears 상태를 초기화합니다. 초기값은 0입니다.
  bears: 0,
  
  // 곰의 수를 증가시키는 함수입니다.
  // 현재 상태를 받아와서 bears 값을 1 증가시킵니다.
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  
  // 모든 곰의 수를 0으로 리셋하는 함수입니다.
  removeAllBears: () => set({ bears: 0 }),
  
  // 새로운 곰의 수를 설정하는 함수입니다.
  // 외부에서 전달받은 newBears 값을 상태로 설정합니다.
  updateBears: (newBears) => set({ bears: newBears }),
}))

// 생성된 Zustand 스토어 훅을 export하여 다른 파일에서 사용할 수 있게 합니다.
export default useStore;

import useStore from './store'; // Zustand 스토어 훅을 import 합니다.

function BearCounter() {
  // useStore 훅을 사용하여 bears 상태를 가져옵니다.
  const bears = useStore((state) => state.bears);
  return <h1>{bears} around here...</h1>;
  // 곰의 수를 화면에 출력합니다.
  // 현재 곰의 수를 표시하는 h1 요소를 반환합니다.
}

function Controls() {
  // useStore 훅을 사용하여 increasePopulation 함수를 가져옵니다.
  const increasePopulation = useStore((state) => state.increasePopulation);
  return <button onClick={increasePopulation}>one up</button>;
  // 곰의 수를 1 증가시키는 버튼을 반환합니다.
}

export { BearCounter, Controls };

devtools 미들웨어

devtools 미들웨어는 Redux DevTools와 통합하여 디버깅을 도와주는 미들웨어입니다.

import create from 'zustand';
import { devtools } from 'zustand/middleware';

// devtools 미들웨어를 사용하여 Zustand 스토어를 생성합니다.
const useStore = create(devtools((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
})));

psrsist 미들웨어

persist 미들웨어는 상태를 로컬 스토리지나 세션 스토리지에 저장하여 페이지 새로고침 후에도 상태를 유지할 수 있게 합니다.

import create from 'zustand';
import { persist } from 'zustand/middleware';

// persist 미들웨어를 사용하여 상태를 로컬 스토리지에 저장합니다.
const useStore = create(persist(
  (set) => ({
    bears: 0,
    increase: () => set((state) => ({ bears: state.bears + 1 })),
  }),
  {
    name: 'bear-storage', // 로컬 스토리지에 저장될 키 이름을 지정합니다.
  }
));

combine()

combine 함수는 여러 상태를 결합하여 하나의 스토어로 만드는 유틸리티입니다.

import create from 'zustand';
import { combine } from 'zustand/middleware';

// combine 함수를 사용하여 여러 상태를 결합합니다.
const useStore = create(combine(
  { bears: 0 }, // 초기 상태를 설정합니다.
  (set) => ({
    increase: () => set((state) => ({ bears: state.bears + 1 })),
  })
));

subscribe 함수는 스토어의 상태 변화에 따라 특정 콜백을 실행하는 함수입니다.

import create from 'zustand';

// Zustand 스토어를 생성합니다.
const useStore = create((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}));

// 상태 변화에 따라 콜백을 실행합니다.
const unsubscribe = useStore.subscribe((bears) => {
  console.log('Bears count changed:', bears);
});

// 콜백 취소 - 상태변화 감시 취소
unsubscribe();