[Zustand] Next.js와 Zustand로 전역 상태 관리하기

MinJae·2024년 12월 30일
4

zustand
이미지 출저: zustand github

Zustand는 React 애플리케이션에서 상태 관리를 간단하고 직관적으로 할 수 있도록 도와주는 상태 관리 라이브러리입니다. Next.js와 함께 사용할 때, Zustand는 전역 상태를 효과적으로 관리할 수 있는 훌륭한 선택이 됩니다. 이 블로그 글에서는 Next.js에서 Zustand를 사용하여 전역 상태를 관리하는 방법을 안내하겠습니다.

1. Zustand 설치

먼저 Zustand를 프로젝트에 설치합니다. 프로젝트에서 사용하는 패키지 매니저에 따라 설치 방법이 다릅니다. 아래 명령어 중 하나를 실행하세요.

// npm
npm install zustand
// yarn
yarn add zustand
// pnpm
pnpm add zustand

2. Zustand Store 생성

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 함수를 정의하여 사용자 로그인/로그아웃 기능을 구현합니다.

3. Zustand Store 사용하기

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를 통해 전역 상태를 쉽게 관리하고, 페이지 간에 상태를 공유하는 방식으로 애플리케이션의 일관성을 유지할 수 있습니다.


✅ 참고

profile
고양이 간식 사줄려고 개발하는 사람

0개의 댓글