[2024.05.29] Zustand 설치 및 사용법(+리렌더링되는 조건)

※ Zustand?

진짜 처음 봤을 때 이게 마스코트야? 생각이 절로 들었던 애

- Zustand는 리덕스의 복잡함과 너무 많은 보일러 플레이트를 극복하기 위해 나온 전역 상태관리 라이브러리로, 현재 낮은 러닝커브로 많이 사랑받고 있다. 그에 맞게 설치와 사용법도 무척 간단하다.

 

1. 설치

npm i zustand

 

2. 사용법

import { create } from 'zustand'

// 함수를 넣어 객체를 리턴
const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, inc } = useStore()
  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

 

※ zustand 리렌더링 하는 조건: 함수의 리턴값을 그대로 이전과 직후를 비교함

// 다음과 같은 zustand store가 있을 때
import { create } from "zustand";

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

export default useLoginStore;

 

❗ 사용하면 안 되는 예시 1

- 다음과 같이 사용하면 상태 객체의 모든 부분이 변경될 때마다 리렌더링 되게 됨

이렇게 사용 x

  // 이렇게 써야 함
  const logIn = useLoginStore((state) => state.logIn);
  const logOut = useLoginStore((state) => state.logOut);

 

❗ 사용하면 안되는 예시 2

 - 아래의 코드는 상태가 변경될 때마다 항상 새로운 객체가 반환되어 불필요한 리렌더링이 발생함. shallow는 상태 객체에 대한 얕은 비교가 수행되고, 두 객체의 각 필드를 비교하여 같은 값이면 동일한 객체로 인식하기 때문에 불필요한 리렌더링을 방지할 수 있음

이렇게 사용 x

// 이렇게 써야함
  const { logIn, logOut } = useLoginStore(
    useShallow((state) => ({
      logIn: state.logIn,
      logOut: state.logOut,
    }))
  );