Next.js - zustand 를 사용한 상태 관리

오늘은 next.js로 프론트엔드 개발하던 중 사용한 zustand 라이브러리에 대해 포스팅한다.

 

원래는 zustand를 쓸 생각이 없었다.

다만 recoil을 쓰다보니 아래와 같은 에러가 발생했다.

이유를 찾아보니, react 15버전 이상에서는 recoil이 호환성 에러가 발생한다는 거.

사실 이 원인을 모른 채 gpt를 붙잡고 한 시간 가까이 씨름하다 구글링으로 알게 되었다. 하참.

그리고, 나는 라이브러리 하나 때문에

전체 프로젝트의 버전을 기존 19버전에서 14버전까지 내릴 생각이 없었기 때문에 zustand를 사용하기로 했다.

 

zustand 를 쓰는 방법은 단순하다.

1. 먼저 해당 라이브러리를 설치한다.

yarn add zustand

 

2. 이후, 상태 관리 스토어를 설정한다. 

내 경우, 유저 정보를 설정했다.

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

// 사용자 정보 인터페이스 정의
interface User {
  id: string;
  email: string;
  nickname: string;
  role?: string;
 // 중략
}

// Zustand 스토어 인터페이스 정의
interface UserState {
  user: User | null;
  setUser: (user: User | null) => void;
}

// Zustand 스토어 생성
export const useUserStore = create<UserState>((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

3. 컴포넌트에서 사용한다.

export const useLogin = (
  onSuccess: () => void,
  onFail?: (errorMessage: string) => void
) => {
  const setUser = useUserStore((state) => state.setUser);
  const router = useRouter();

 

zustand의 장점

- 설정 방법이 매우 단순하다. (Recoil과 달리, 별도의 provider 설정이 필요 없다.)

- typescript와 완벽히 통합된다.