React를 이용한 웹 개발시 상태관리는 정말 중요하다. Redux, Recoil을 사용해보았고 개발자로 시작하게된 회사에서 Zustand를 사용하게 되어 출근 전 개념을 잡기위해 사용해 보았다.
방식은 Recoil과 유사했다. 큰차이점은 rootComponent를 특정 컴포넌트로 감쌀 필요가 없다(예: recoil사용시 <RecoilRoot></RecoilRoot>를 이용해 <App/> 컴포넌트를 감싸야 전역상태관리 가능). 또, Store의 생성이 좀더 간단한것 같다.

store 생성

//store의 이름은 store.ts로 생성했다.

import create from 'zustand';

interface SelectContentState { //ts를 사용하기때문에 타입지정이 필요.js사용시 미사용 코드
  selectContent: number;
  setSelectContent: (select: number) => void;
}

// create를 이용해서 store을 생상헐 수 있으며, 다수의 store도 생성 가능하다.
export const useStore = create<SelectContentState>((set) => ({
  // create 함수의 매개변수로 콜백함수를 받는데 이 콜백함수의  return객체에 state,
  // setState를 넣는다.
  selectContent: window.localStorage.getItem('select') ? 
  	Number(window.localStorage.getItem('select')) : 0,
  setSelectContent: (select) => {
    set((state) => ({ ...state, selectContent: select }));
  },
}));

state 사용

//사용하고자 하는 컴포넌트에서 사용할 store를 가져온다.
import { useStore } from '../store';

const NavBar = () => {
  //구조분해할당을 통해 state, setState를 가저와서 사용하면된다. 너무 간단하다.
  const { selectContent, setSelectContent } = useStore();
  
 return ... 
}

export default NavBar;

간단하다 zustand를 이용한 전역상태를 알아보았는데, create함수는 추가 옵션변수받을 수있다. 천천히 배워보자!