Zustand 와 React query는 대표적인 next.js의 전역 상태 관리 라이브러리이다.

프로젝트 작업 당시 Zustand를 설치만 하고 적용을 하진 않았다. 적용하기에 적합한 상태값을 찾지 못하기도 했다. 모바일 햄버거 버튼 메뉴를 페이지가 이동 할 경우에 무조건 닫힘으로 상태를 변경하기 위해 zustand를 사용하기로 결정.

Zustand

• 일반적으로 클라이언트 상태를 관리한다.
• useTestStore 라는 저장소를 create한 후 상태(open)와 상태를 변경하는 함수(toggleMenu)를 정의 한다. .tsx 컴포넌트에서 해당 Store를 불러와 필요 상태를 적용하거나 변경 할 수 있다.

[예시]

//store.ts
import { create } from "zustand";

type TestState = {
	open: Boolean;
	toggleMenu: () => void;
}

export const useTestStore = create<TestState>((set)=>({
	open: false,
	toggleMenu: ()=> 
		set((state) => ({
			open: !state.open
		}))
}))

// .tsx
import {useTestStore} = from @/store/store.ts

const open = useTestStore((state) => state.open);
const toggleMenu = useTestStore((state)=> state.toggleMenu);

[심화] Zustand의 불필요한 리랜더링을 줄이는 방법

const { count, increase } = useCounterStore();

또는

const store = useCounterStore();
const count = store.count;

보다는

const count = useCounterStore((state) => state.count);

const increase = useCounterStore((state) => state.increase );

권장 >> store의 다른 값이 변경되어도 리랜더링 되지 않는다.

그럼 여러 값을 하나로 묶고 싶은 경우에는 어떻게 해야해?

function UserProfile() {
  const userInfo = useUserStore(
    (state) => ({
      name: state.user.name,
      age: state.user.age,
      email: state.user.email,
    })
  );

  console.log(userInfo);

  return <UserCard user={userInfo} />;
}