Zustand를 활용(2): Zustand에서 상태 관리의 기본 원리

Zustand에서 상태 관리의 기본 원리

Zustand에서 상태 관리

내용:

• Zustand에서 상태 관리하는 방법: 상태 저장소(store)를 통해 상태를 정의하고 상태를 변경하는 방식.
• useStore 훅을 사용하여 상태를 읽고, 상태를 업데이트하는 방법을 학습합니다.

실습:

1. 상태 저장소에서 상태 정의 및 변경하는 예제: Zustand를 사용하여 상태 저장소를 생성하고, 상태를 정의하고 변경하는 방법을 실습합니다.
2. 버튼 클릭 시 상태 업데이트 (Counter 컴포넌트 예제): 간단한 카운터 컴포넌트를 구현하여 상태가 어떻게 관리되고 업데이트되는지 실습합니다.

코드 예제:

// store.js
import create from 'zustand';

// Zustand 상태 저장소 생성
const useStore = create((set) => ({
  count: 0,
  increaseCount: () => set((state) => ({ count: state.count + 1 })),
  decreaseCount: () => set((state) => ({ count: state.count - 1 })),
}));

export default useStore;

 

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

function Counter() {
  const count = useStore((state) => state.count);
  const increaseCount = useStore((state) => state.increaseCount);
  const decreaseCount = useStore((state) => state.decreaseCount);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increaseCount}>Increment</button>
      <button onClick={decreaseCount}>Decrement</button>
    </div>
  );
}

export default Counter;

설명:

• useStore: 상태 저장소를 생성하고 count, increaseCount, decreaseCount 상태를 정의합니다.
• Counter 컴포넌트: 상태 저장소에서 상태를 읽어와 화면에 출력하고, 버튼을 클릭하면 상태를 업데이트합니다.