React/React Core

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

코딩쉐프 2024. 12. 2. 23:49
728x90

"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 디버깅이 가능합니다.
728x90