Zustand는 React 애플리케이션에서 상태 관리를 간단하고 직관적으로 할 수 있도록 도와주는 상태 관리 라이브러리입니다. Next.js와 함께 사용할 때, Zustand는 전역 상태를 효과적으로 관리할 수 있는 훌륭한 선택이 됩니다. 이 블로그 글에서는 Next.js에서 Zustand를 사용하여 전역 상태를 관리하는 방법을 안내하겠습니다.
먼저 Zustand를 프로젝트에 설치합니다. 프로젝트에서 사용하는 패키지 매니저에 따라 설치 방법이 다릅니다. 아래 명령어 중 하나를 실행하세요.
// npm
npm install zustand
// yarn
yarn add zustand
// pnpm
pnpm add zustand
Zustand를 사용하려면 상태를 관리할 store를 만들어야 합니다. 저는 authStore.ts
라는 파일을 만들었습니다.
// src/stores/authStore.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { Tokens, User } from '@/types/types';
type AuthState = {
user: User | null;
isAuthenticated: boolean;
token: Tokens | null;
login: (userData: User, token: Tokens) => void;
logout: () => void;
};
const useAuthStore = create<AuthState>()(
persist(
set => ({
user: null,
isAuthenticated: false,
token: null,
login: (userData, token) =>
set({
user: userData,
isAuthenticated: true,
token,
}),
logout: () =>
set({
user: null,
isAuthenticated: false,
token: null,
}),
}),
{
name: 'auth-storage',
},
),
);
export default useAuthStore;
위 코드에서는 authStore.ts
라는 파일을 생성하고, 사용자 인증 정보를 관리하는 상태를 저장합니다. persist 미들웨어를 사용하여 로컬 스토리지에 상태를 유지할 수 있습니다. user, isAuthenticated, token 상태와 login, logout 함수를 정의하여 사용자 로그인/로그아웃 기능을 구현합니다.
useAuthStore
훅을 통해 이 상태를 전역적으로 접근할 수 있습니다. 예를 들어, 네비게이션 바에서 사용자의 로그인 상태를 확인하고, 로그아웃 버튼을 구현하는 방식입니다.
import useAuthStore from '@/stores/authStore';
const Nav = () => {
const { isAuthenticated, logout } = useAuthStore();
return (
<nav>
{isAuthenticated ? (
<>
<span>Welcome, User!</span>
<button onClick={logout}>Logout</button>
</>
) : (
<span>Please log in</span>
)}
</nav>
);
};
이 예제에서는 isAuthenticated를 통해 사용자가 로그인한 상태인지 확인하고, logout 함수를 호출하여 로그아웃 기능을 제공합니다.
Zustand는 간단한 상태 관리에 적합하지만, 상태를 보다 세부적으로 나누어 관리할 수 있습니다. 예를 들어, authStore
외에도 다른 기능을 담당하는 상태를 별도로 만들 수 있습니다. persist
미들웨어를 활용하여 상태를 브라우저에 저장하고, 페이지 새로 고침 시에도 상태를 유지할 수 있습니다.
Zustand는 Next.js 프로젝트에서 상태 관리를 간단하고 효율적으로 처리할 수 있는 훌륭한 도구입니다. 이 글에서는 Zustand를 사용하여 로그인 상태를 관리하는 방법을 살펴봤습니다. Zustand를 통해 전역 상태를 쉽게 관리하고, 페이지 간에 상태를 공유하는 방식으로 애플리케이션의 일관성을 유지할 수 있습니다.
✅ 참고