[React] Zustand

Zustand를 사용하는 이유?

redux의 boilerplate 코드를 줄이기 위해서 사용한다

사용법

설치

npm i zustand

세팅

const useLoginStore = create((set) => ({
  isLoggedIn: false,
  logIn: () => set(() => ({ isLoggedIn: true })),
  logOut: () => set(() => ({ isLoggedIn: false })),
}));

export default useLoginStore;

redux에 비해 쵸오오오-----------간단!해진 것을 확인할 수 있다.

zustand와 immer.js
이때, isLoggedIn: true까지만 써주고, 객체의 isLoggedIn, logOut에 관련된 정보는 안 넣어놨다. zustand 자체에서 편하게 사용할 수 있도록 알아서 합쳐주도록 만들었기 때문이다.
그럼에도 불구하고 immer.js를 써야한다. 왜냐면, 이 기능은 1st depth 까지만 적용되기 때문이다.

immer를 middleware로 사용하려면 그냥 immer를 설치한 후 create 함수를 immer()로 감싸주면 된다.

사용

const logIn = useLoginStore((state) => state.logIn);
// zustand는 여기서 useLoginStore의 콜백함수가 리턴하는 값(state.logIn)의 변화여부를 통해 리렌더링 여부를 결정한다.

⚠️ 주의

const { logIn } = useLoginStore((state) => state)
// 이렇게 쓰면 로그인 버튼을 누를 때마다 버튼 그룹이 리렌더링 된다

const { logIn, logOut } = useLoginStore((state) => ({
  logIn: state.logIn,
  logOut: state.logOut,
}));
// 이렇게 써도 리렌더링 됨. 객체가 계속 새로 생성되기 때문

// 구조분해할당 문법을 쓰고 싶다면 useShallow 함수를 이용한다
  const { logIn, logOut } = useLoginStore(
  useShallow((state) => ({
    logIn: state.logIn,
    logOut: state.logOut,
  }))
);

zustand는 기본적으로 비동기 문법을 지원, async await 사용 가능