2024/06/14 Zustand

Zustand란?

React에서 상태 관리를 위해 사용되는 라이브러리
Redux와 같은 복잡한 상태 관리 라이브러리와는 달리,
간단하고 직관적인 API를 제공하여 상태 관리를 쉽게 할 수 있음

설치

npm

• npm install zustand

yarn

• yarn add zustand

import

• import create from 'zustand'

---

특징

간단한 API

• 상태를 만들고, 구독하고, 업데이트하는 등의 작업을 매우 쉽게 처리.
• 복잡한 상태 관리 로직을 작성할 필요없음
• 상태 업데이트, 비동기 작업 등 대부분의 작업을 간단한 함수 호출로 처리

성능 최적화

• 컴포넌트 재렌더링을 최소화하여 성능최적화
  상태 업데이트시 오직 필요한 컴포넌트만 재렌더링됨.

전역 상태 관리:

• 애플리케이션 전체에서 공유되는 전역 상태를 쉽게 관리.
• 중앙 집중식으로 관리하므로 코드 유지 보수성좋음

비동기 작업 지원:

• 비동기 작업을 처리하는 데 필요한 기능을 제공.
  비동기 액션을 정의하고, 이를 통해 상태를 업데이트후 간단하게 구현 가능

TypeScript 지원:

TypeScript를 완벽하게 지원하므로, 정적 타입 검사와 자동 완성 등의 이점이 있음.

---

사용법

1. 상태 저장소 생성

• create 함수를 사용하여 상태 저장소를 생성
  초기 상태와 상태를 업데이트하는 액션을 정의하는 콜백 함수를 받음

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
//count 상태와 increment, decrement 액션을 정의
}));

2. 상태와 액션 정의

• 상태 저장소 내에서 초기 상태와 액션을 정의
• 액션은 set 함수를 사용하여 상태를 업데이트

3. 컴포넌트에서 사용

• 컴포넌트에서 useStore 함수를 호출하여 상태와 액션을 가져옴
• 가져온 count, increment, decrement를 사용하여 UI를 렌더링하고 상태를 업데이트

import { useStore } from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
};

export default Counter;

---

Redux Toolkit vs Zustand

1. 상태 관리 접근 방식

• Redux Toolkit: Flux 패턴을 기반으로 하는 상태 관리.액션, 리듀서, 스토어 등의 개념을 사용

• Zustand: 단일 상태 객체와 간단한 API를 사용.

2. API 복잡성

• Redux Toolkit: 상태 관리를 위해 액션 생성자, 리듀서, 미들웨어 등
  다양한 개념을 숙지해야함.

• Zustand: 상태 관리를 위한 핵심 API가 매우 간단
  create 함수 하나로 상태 저장소를 만들 수 있음

3. 학습 곡선

• Redux Toolkit: Flux 패턴과 Redux의 개념을 이해해야 하므로 상대적으로 학습 곡선이 높음

• Zustand: 상태 관리를 위한 기본적인 개념만 이해하면 되므로 학습 곡선이 낮음.

4. 성능:

• Redux Toolkit: 컴포넌트의 불필요한 재렌더링을 방지하기 위해 추가적인 최적화 작업이 필요.

• Zustand: React의 내부 상태 관리 메커니즘을 활용하여 효율적인 렌더링을 보장.

5. 비동기 처리:

• Redux Toolkit: 비동기 작업을 처리하기 위해 Redux-Thunk, Redux-Saga 등의 미들웨어를 사용.

• Zustand: 콜백, Promise, Thunk 등 다양한 비동기 작업 처리 방식을 제공.

결론

Redux Toolkit은 복잡한 상태 관리 문제를 해결하기 위한 강력한 도구.

반면, Zustand는 간단한 상태 관리 요구사항을 가진 프로젝트에 적합함.

프로젝트의 복잡성과 개발팀의 선호도에 따라 적절한 라이브러리를 선택.