[트러블 슈팅] 전역 상태 관리와 인증 로직 분리 - Zustand를 활용한 인증 상태 관리 개선

Zustand를 사용하여 로그인 상태와 유저 정보를 효율적으로 관리하려는 고민

Taskify 프로젝트를 개발하면서, 여러 컴포넌트에서 사용되는 인증 상태 관리가 점점 복잡해지며 코드가 중복되는 문제가 발생하였습니다.

인증 상태를 관리하는 코드가 각 컴포넌트에 분산되어 있어 유지보수가 어려워지고, 인증 관련 로직을 수정할 때마다 여러 곳을 수정해야 하는 번거로움이 있었습니다.

 

이 문제 해결을 위해서 Zustand를 사용하여 인증 상태를 전역적으로 관리, 인증 관련 로직을 authStore 라는 별도의 상태 관리로 분리하여 재사용 가능하고 효율적인 방식으로 개선하였습니다.

 

이번 포스팅에서는 이 과정을 공유하며, Zustand를 이용한 인증 상태 관리 방법과 코드 중복을 줄일 수 있었던 경험에 대해서 작성해보겠습니다. 🙌🏻

 

 

☄️ 문제 상황 - 인증 상태 관리의 복잡함과 중복 코드

프로젝트 초기에는 인증 관련 로직을 각 컴포넌트에서 직접 처리했습니다.

예를 들어, 로그인 상태를 처리하기 위해 각 페이지나 컴포넌트에서 sessionStorage, cookies 또는 전역 상태를 직접 다뤄야 했습니다. 이로 인해 다음과 같은 문제가 발생하였습니다.

 

중복된 코드: 로그인, 로그아웃, 인증 확인 로직이 여러 컴포넌트에 분산되어 있어 같은 코드가 반복되었고, 이를 수정할 때마다 여러 파일을 찾아 수정해야 했습니다.

복잡한 상태 관리: 인증 상태를 관리하기 위해 여러 상태를 각 컴포넌트에서 별도로 다뤄야 했기 때문에 상태의 흐름을 추적하기 어려웠습니다.

유지보수 어려움: 인증 관련 로직을 변경해야 할 때, 각 컴포넌트에서 개별적으로 관리된 상태를 수정해야 하므로 버그가 발생할 위험이 컸습니다.

 

이러한 문제를 해결하기 위해, 인증 로직을 전역 상태로 관리하고, 인증 관련 로직을 하나의 authStore로 모아서 중앙에서 관리하기로 했습니다.

 

🚀 해결 방안 - Zustand를 활용한 인증 상태 분리

Zustand는 미니멀한 API로 상태를 전역적으로 관리할 수 있어, 복잡한 상태 관리 없이 쉽게 상태를 공유할 수 있다는 장점이 있습니다.

덕분에 인증 상태를 여러 컴포넌트에서 일관되게 사용할 수 있고, 코드의 중복을 줄일 수 있었습니다.

📎 authStore 설계

주요 상태는 isAuthenticated(로그인 여부)와 user(사용자 정보)이며, 인증 관련 함수들(login, logout, checkAuth)을 포함

export const useAuthStore = create<AuthState>((set) => ({
  isAuthenticated: false,
  user: null,
  
  setUser: (user: User) => {
    set({ user, isAuthenticated: true });
  },
  
  // 로그인 후 사용자 정보와 토큰을 상태에 저장하고, 쿠키에 토큰을 설정
  login: async (loginData) => {
    const response = await getLogin(loginData);
    setAccessToken(response.accessToken);
    set({ user: response.user, isAuthenticated: true });
  },


  // 로그아웃 시 상태를 초기화하고, 인증 상태를 false로 설정
  logout: () => {
    set({ user: null, isAuthenticated: false });
  },

  // 페이지 새로고침 시 자동으로 사용자 인증 상태를 확인
  checkAuth: async () => {
    try {
      const user = await getUserInfo();
      set({ user, isAuthenticated: true });
    } catch {
      set({ user: null, isAuthenticated: false });
    }
  },
}));

이를 통해 유지보수성과 확장성이 향상되었고, 프로젝트의 인증 로직을 깔끔하게 관리할 수 있게 되었습니다 :)

 

📎 코드 중복 제거와 효율성 향상

1. 중복 코드 제거: 인증 관련 로직을 한 곳에 집중시켜, 코드의 중복을 없앴습니다.
2. 전역 상태 관리: 앱의 모든 컴포넌트에서 인증 상태를 손쉽게 가져와 사용할 수 있습니다.
3. 유지보수 용이성: 인증 관련 로직을 수정할 때 한 곳만 수정하면 되므로 유지보수가 쉬워졌습니다.

 

한줄평

Zustand의 간결한 API 덕분에 상태 관리가 직관적이고 쉬워, 추가적인 기능이나 수정이 필요한 상황에서도 빠르고 효율적으로 대처할 수 있었다 ~!!