[React] Zustand로 로그인 상태 관리하기: 코드 + 개념 설명

 

사이드 프로젝트를 하면서 Zustand를 이용해보았다. 

 

Introduction - Zustand

Introduction - Zustand

pmndrs/zustand: 🐻 React에서 상태 관리를 위한 필수품

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

 

위 첫번째 문서로 들어가보면 귀여운 곰돌이가 나오고, one up 을 클릭하면 숫자가 올라간다.

zustand 예제로 만들어 놓은 것 같다. 

 

 

Zustand란 

독일어로 '상태'라는 뜻이고, 

전역 상태를 간단하게 관리할 수 있도록 도와주는 라이브러리이다. 

Redux보다 훨씬 가볍고 보일러플레이트(반복적으로 작성해야 하는 틀 같은 코드)도 적다.

 

Redux를 실제로 사용해본 경험은 없지만, 

간단히 찾아본 결과, Zustand 대신 Redux를 썼다면 파일 수도 늘고, 작성해야할 코드량도 더 많았을 것 같다는 점 정도는 알 수 있었다. 

 

 

Zustand 설치

Zustand를 사용하려면 설치를 진행해야 한다.

npm install zustand

 

 

 

전체 코드

내가 사용한 총 코드는 이렇게 되며, 밑에서 하나 하나 자세히 정리해보려고 한다.

import {create} from "zustand";
import {persist} from "zustand/middleware";

interface UserState {
  token: string | null;
  expiresAt: number | null;
  user_id: string | null;
  nickname: string | null;
  email: string | null;
  provider: string | null;

  setUser: (user: Partial<Omit<UserState, 'setUser' | 'resetUser'>>) => void;
  resetUser: () => void;
}

export const useUserStore = create<UserState>()(
  persist(
    (set) => ({
      token: null,
      expiresAt: 0,
      user_id: null,
      nickname: null,
      email: null,
      provider: null,

      setUser: (user) =>
        set((state) => ({
          ...state,
          ...user,
        })),

      resetUser: () =>
        set({
          token: null,
          expiresAt: 0,
          user_id: null,
          nickname: null,
          email: null,
          provider: null,
        }),
    }),
    {
      name: "user-storage",
    }
  )
);

 

 

 

코드 분석

interface UserState

interface UserState {
  token: string | null;
  expiresAt: number | null;
  user_id: string | null;
  nickname: string | null;
  email: string | null;
  provider: string | null;

  setUser: (user: Partial<Omit<UserState, 'setUser' | 'resetUser'>>) => void;
  resetUser: () => void;
}

 

UserState라는 interface를 만들어줬다. 

사용자 관련 값들을 따로 다루는 것보다 하나의 객체로 관리하면 더 효율적이라 이렇게 만들었다. 

변수만 정의하는 게 아니라 함수도 같이 정의했다 (setUser, resetUser) 

 

 

이제 각 코드를 뜯어보자! 

  token: string | null;
  expiresAt: number | null;
  user_id: string | null;
  nickname: string | null;
  email: string | null;
  provider: string | null;

 

상태 관리할 때 쓰이는 사용자 상태의 타입을 정의한 것이다. 

string | null : string이나 null이 가능한 타입이라는 뜻이다.

 

 

 

setUser: (user: Partial<Omit<UserState, 'setUser' | 'resetUser'>>) => void;

① Omit<UserState, 'setUser' | 'resetUser'> : userState 타입에서 setUser랑 resetUser를 제외함(Omit)

 

Omit 은 영어로 생략하다, 제외하다 라는 의미이다. 

Omit<T, K>로 사용을 하는 것이며, 타입 T에서 키 K를 제외한 타입을 만드는 도구이다. 

위에서 T는 UserState이고,

K는 'setUser' | 'resetUser' 인 것이다. 

 

이 Omit은 TypeScript에만 있는 유틸리티 타입이다. 

 

② Partial<...>

T의 모든 속성을 선택적(optional)으로 만든다.

즉, 모든 필드가 있어도 되고, 일부만 있어도 된다는 뜻이다. 

 

useUserStore.getState().setUser({ nickname: "신짱구" });

얘를 들어 위와 같은 식으로 전체를 변경할 필요 없이 닉네임만(필요한 부분만) 변경할 수 있다. 

 

 

 

 

create<UserState>()(...) & persist(...)

import {create} from "zustand";
import {persist} from "zustand/middleware";

export const useUserStore = create<UserState>()(
  persist(
    (set) => ({
      ...
    }),
    {
      name: "user-storage", // 로컬스토리지 키 이름
    }
  )
);

 

일단 create와 persist는 사용하기 전에 반드세 import 해주어야 한다.

 

create

create()는 Zustnad에서 store를 생성하는 함수이다. 

전역 상태를 정의하고, 그 상태를 읽거나 수정할 수 있는 함수를 만드는 역할을 한다. 

 

persist

persist() 는 localstorage에 상태를 저장해주는 미들웨어이다. 

새로고침해도 유저 정보가 사라지지 않는다.

자동으로 localstorage.setItem('user-storage', 상태) 와 같은 동작을 처리해준다. 

 

미들웨어(Middleware)란?

두 개의 무언가 사이에서 중간 역할을 하는 코드를 말한다. 

Zustand에서는 스토어를 생성할 때 기능을 확장해주는 함수를 미들웨어라고 일컫고,

persist 미들웨어는 상태를 자동으로 localStorage에 저장하고 불러오게 도와주는 것이다. 

 

 

 

setUser

setUser: (user) =>
  set((state) => ({
    ...state,
    ...user,
  })),

set()은 Zustand에서 내부적으로 제공하는 상태 업데이트 함수이다. 

...state: 기존 상태를 유지하기 위해 사용함.

...user: 새로 전달된 값으로 상태를 덮어쓰기 위해 사용함.

setUser({ userId: "userId123" }) 으로 한다면 userId만 변경되고, 나머지 상태 값들은 그대로 유지된다.

 

 

 

resetUser

      resetUser: () =>
        set({
          token: null,
          refreshToken: null,
          expiresAt: 0,
          user_id: null,
          nickname: null,
          email: null,
          provider: null,
        }),

 

Zustand의 상태를 초기화 하는 함수이다.

위 글과 같은 예제에선 보통 로그아웃이나 탈퇴할 때 사용한다.

 

 

 

 

다른 컴포넌트에서 사용하기 

 

Login.tsx에서 저장한 user 정보를 MyPage.tsx에서 밑과 같이 가져올 수 있다.

const userId = useUserStore((state) => state.user_id); // ID 가져오기

 

그러면 의문을 제기할 수 있다.

그냥 localStorage.getItem으로 가져오면 되는데, 왜 굳이 저렇게 가져오는지? 

 

왜냐하면 localStorage.getItem은 자동 리렌더링이 안 되지만, 

Zustand는 자동 리렌더링이 되기 때문이다.

 

예를 들어 헤더에 내 닉네임(header.tsx)이 있고, 내 정보를 수정하는 모달(MyPageModal.tsx)에서 닉네임을 수정했다고 치자. 

수정함과 동시에 헤더와 모달에 있는 닉네임이 동기화(변경)되어야 한다.

 

Zustand를 이용하면 상태가 변경되자마자 상태를 구독 중인 컴포넌트들이 자동으로 리렌더링되기 때문에 두 컴포넌트 모두 즉시 변경된 닉네임을 반영할 수 있는 것이다. 

반면, localStorage는 단순히 값을 저장하는 공간이고, 값이 바뀌어도 React는 그걸 감지하지 못한다.

따라서 닉네임을 바꾼다면 모달에서는 변경된 닉네임이 보이지만, 헤더에는 이전 닉네임 그대로일 수 있다. 

 

 

추가적으로 정보를 업데이트하는 것은 이런 식으로 작성하면 된다.

useUserStore.getState().setUser({
	nickname: response.data.nickname,
	email: response.data.email
});