Zustand 사용

전역 상태 관리 패키지

 

1. src/stores/storeButton.jsx 생성

import { create } from "zustand";

const useButtonStore = create((set) => ({
  count: 0,
  selectedButton: null,

  setSelectedButton: (button) => set({ selectedButton: button }),
  incrementCount: () => set((state) => ({ count: state.count + 1 })),
  removeCoutn: () => set({ count: 0 }),
}));

export default useButtonStore;

 

- 오브젝트 형태의 전역 상태 useButtonStore은 변수와 함수를 속성으로 가진다.

- create의 set 인자를 통해 전역 상태 내부의 속성의 값을 변경할 수 있다.

 

2. useButtonStore 사용

import useButtonStore from "../stores/storeButton";

export default function FirstChild() {
  const { setSelectedButton, incrementCount, removeCount } = useButtonStore(
    (state) => state
  );

  const handleClick = (button) => {
    setSelectedButton(button);
  };

  return (
    <div>
      <h1>First child</h1>
      <div>
        <button onClick={() => handleClick("O")}>O</button>
        <button onClick={() => handleClick("X")}>X</button>
      </div>
      <div>
        <button onClick={incrementCount}>카운트 증가</button>
        <button onClick={removeCount}>카운트 리셋</button>
      </div>
    </div>
  );
}

 

const { setSelectedButton, incrementCount, removeCount } = useButtonStore((state) => state);

- useButtonStore 오브젝트의 속성을 사용한다.

- useButtonStore의 인자 state는 속성(함수)를 사용할 때 전달되는 인자를 의미한다.

- useButtonStore의 return값 state는 전역 상태 store의 속성 값을 의미한다.

1. setSelectedButton("X")은 "X"을 store에 전달한다. (state 전달)

2. store의 setSelectedButton의 인자에 "X"가 전달되어 set함수가 실행된다. (state 리턴)

2. store의 selectedButton 값은 "X"으로 변경된다. 

3. 전역 상태를 확인할 컴포넌트 생성

import useButtonStore from "../stores/storeButton";

export default function SecondChild() {
  const { count, selectedButton } = useButtonStore((state) => state);
  return (
    <div>
      <h1>Second child</h1>
      <p>카운트: {count}</p>
      <p>선택한 버튼: {selectedButton}</p>
    </div>
  );
}