내일배움캠프 React_7기 TIL - 34. Zustand

Zustand

Zustand는 React 애플리케이션에서 상태 관리를 간단하고 직관적으로 처리할 수 있도록 도와주는 경량 상태 관리 라이브러리이다. 독일어로 "상태(state)"라는 뜻을 지닌 이 라이브러리는 복잡한 설정 없이 간단한 API를 통해 빠르게 상태 관리 로직을 구현할 수 있는 것이 특징이다.

특징

1. 간결한 API: Redux와 같은 복잡한 설정이나 보일러플레이트 코드가 필요하지 않으며, 상태 관리 로직이 간단하고 직관적이다.
2. React와 독립적: React의 Context API나 Provider 없이도 사용할 수 있어 더 자유롭게 상태를 관리할 수 있다.
3. 빠른 퍼포먼스: 선택적으로 필요한 컴포넌트만 리렌더링하여 성능이 뛰어나다.
4. 비동기 지원: 비동기 작업을 포함한 상태 관리도 쉽게 처리할 수 있다.

설치

yarn add zustand
# 또는
npm install zustand

기본 사용법

import create from 'zustand';

// 상태 스토어 생성
const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

// 컴포넌트에서 사용
const Counter = () => {
  const { count, increase, decrease } = useStore();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>증가</button>
      <button onClick={decrease}>감소</button>
    </div>
  );
};

---

상태 선택 최적화

Zustand는 상태 선택자를 사용하여 불필요한 리렌더링을 방지할 수 있다.

const count = useStore((state) => state.count);

상태의 특정 부분만 선택하여 리렌더링이 필요한 경우에만 컴포넌트를 업데이트한다.

---

미들웨어 사용

Zustand는 persist, devtools 등의 미들웨어를 제공하여 상태를 로컬 스토리지에 저장하거나 개발자 도구와 통합할 수 있다.

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

const useStore = create(
  devtools(
    persist((set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
    }))
  )
);

---

Zustand의 장점과 단점

장점:

• 간단한 문법과 빠른 학습 곡선.
• React와 독립적이므로 다양한 프로젝트에 유연하게 적용 가능.
• 불필요한 리렌더링을 최소화하여 성능 최적화.

단점:

• 복잡한 상태 관리나 대규모 애플리케이션에서는 구조화가 필요할 수 있음.
• 전역 상태 관리가 너무 단순화되면 상태 추적이 어려울 수 있음.

---

결론

Zustand는 React 애플리케이션에서 복잡한 상태 관리 로직을 간결하고 효율적으로 처리할 수 있는 강력한 대안이다. 프로젝트 규모와 요구 사항에 따라 Redux와 같은 무거운 상태 관리 라이브러리 대신 도입할 가치가 충분하다. 다음엔 Zustand를 실제로 사용하고 내용을 다시 정리해보고자 한다.