14.Zustand로 배우는 경량 상태 관리: 간단하고 빠른 React 상태 관리 솔루션

"Zustand로 배우는 경량 상태 관리: 간단하고 빠른 React 상태 관리 솔루션"

---

1시간 분량 강의안 (Zustand 기초)

강의 목표

1. Zustand의 개념과 장점을 이해한다.
2. Zustand의 주요 기능(상태 생성, 업데이트, 구독)을 학습한다.
3. Zustand를 활용하여 React 애플리케이션에서 상태를 관리하는 방법을 익힌다.

---

강의 목차

---

1. Zustand란 무엇인가? (10분)

Zustand의 정의

• Zustand는 React 애플리케이션에서 사용되는 간단하고 경량화된 상태 관리 라이브러리입니다.
• 독일어로 "상태"라는 뜻이며, 직관적이고 선언적인 상태 관리를 제공합니다.

Zustand의 주요 특징

1. 간결한 API: 상태 생성과 사용이 간단.
2. 퍼포먼스 최적화: 필요한 컴포넌트만 렌더링.
3. React와 독립적: React 외부에서도 사용 가능.
4. 미들웨어 확장: 로깅, 지속성, Devtools와 같은 기능 확장 지원.

Zustand의 주요 구성 요소

1. Store: 상태를 정의하고 관리하는 중앙 저장소.
2. Actions: 상태를 변경하는 함수.
3. Selectors: 필요한 상태만 선택적으로 구독.

---

2. Zustand 설치 및 기본 설정 (10분)

1단계: Zustand 설치

• Zustand 설치:

npm install zustand

2단계: 기본 Store 생성

• 상태를 정의하는 Store 작성:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useStore;

---

3. Zustand 주요 개념 및 구현 (20분)

1단계: 상태 사용

• React 컴포넌트에서 Store의 상태와 함수를 가져와 사용:

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

2단계: Selectors 활용

• 필요한 상태만 구독하여 렌더링 최적화:

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

3단계: 상태 초기화

• Store 상태를 초기화하는 함수 추가:

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

---

4. 고급 Zustand 기능 (10분)

1단계: 미들웨어 추가

• 상태를 로컬 스토리지에 저장:

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

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }),
    { name: 'counter-storage' }
  )
);

export default useStore;

2단계: Zustand Devtools

• 상태 디버깅을 위한 Devtools 통합:

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

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

export default useStore;

---

5. 실습 과제 (10분)

실습 과제

1. Zustand를 사용하여 카운터 애플리케이션을 구현하세요.
2. 카운터 값이 10 이상일 때 "최대 값 도달" 메시지를 표시하세요.
3. Zustand Devtools와 로컬 스토리지 저장 기능을 추가하세요.

예제

• 카운터 상태 확인 컴포넌트:

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

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

  return <p>{count >= 10 ? '최대 값 도달' : `Count: ${count}`}</p>;
};

export default CounterInfo;

---

6. Q&A 및 정리 (10분)

• Q&A:
  1. Zustand와 Redux의 차이점은 무엇인가요?
  2. Zustand는 어떤 상황에서 적합한 상태 관리 도구인가요?
• 요약:
  • Zustand는 React와 독립적으로 작동하는 간단하고 경량화된 상태 관리 라이브러리입니다.
  • 상태 정의, 업데이트, 구독이 간단하며, Selectors를 사용해 성능을 최적화할 수 있습니다.
  • 미들웨어 확장을 통해 로컬 스토리지 저장 및 Devtools 디버깅이 가능합니다.