15.8.2 사용자 인증 상태 관리하기

이제 사용자의 인증 상태를 전역 상태로 관리해봅시다. 지금까지 다룬 전역 상태 관리 방법은 총 세 가지입니다.

여기서는 가장 기본적인 Context를 사용하여 구현하겠습니다. 전역 상태가 이것 외에는 없기 때문에 굳이 전역 상태 라이브러리를 사용하지 않아도 됩니다. 어떤 방식을 사용할지는 여러분의 선택입니다. 연습 삼아 라이브러리를 적용하여 구현해보는 것도 좋습니다.

우선 최상위 디렉터리에 contexts 디렉터리를 만들고 그 안에 UserContext.tsx 파일을 생성하여 다음 코드를 작성하세요.

contexts/UserContext.tsx

import React, {createContext, useContext, useState} from 'react';
import {User} from '../api/types';

// UserContext의 값은 [값, 업데이터 함수] 타입을 지닙니다.
// useState를 통해 반환된 값을 그대로 UserContext에 담겠습니다.
type UserContextState = [User | null, (user: User | null) => void];

const UserContext = createContext<UserContextState | null>(null);

export function UserContextProvider({children}: {children: React.ReactNode}) {
  const userState = useState<User | null>(null);
  return (
    <UserContext.Provider value={userState}>{children}</UserContext.Provider>
  );
}

// Context를 추후 더 편하게 사용할 수 있도록 만든 Hook입니다.
export function useUserState() {
  const userState = useContext(UserContext);
  if (!userState) {
    throw new Error('UserContext is not used');
  }
  return userState;
}