유저 상태를 Provider로 비비고, Context로 비비자!

 

React의 Context API를 활용하면 전역 상태를 간단하고 효율적으로 관리할 수 있습니다.
이 글에서는 Context와 Provider의 기본 개념부터, 로그인 상태를 관리하는 방법까지 하나씩 정리해 보겠습니다!

---

 

01

Context와 Provider

React의 Context API에는 전역 상태를 관리하기 위한 두 가지 주요 도구가 있습니다: Context와 Provider입니다.

1. Context 란?

Context는 데이터를 저장하는 "저장소" 역할을 합니다.
React에서 전역 상태를 관리할 때 데이터를 담는 "그릇"처럼 사용됩니다.

import { createContext, useContext } from "react";

// Context 생성
export const AuthContext = createContext(null);

// Context 값 사용하기
export const useUser = () => {
  return useContext(UserContext);
};

2. Provider 란?

Provider는 데이터를 "공급"하는 역할을 합니다.
Context라는 그릇에 데이터를 넣고 필요한 컴포넌트에 데이터를 전달합니다.

import { AuthContext } from "./AuthContext";

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthProvider;

위 예제에서 useState를 사용해 user와 setUser를 관리합니다.
이렇게 하면 모든 하위 컴포넌트가 AuthContext.Provider를 통해 데이터를 사용할 수 있게 됩니다.

 

3. Context와 Provider의 관계

Context는 데이터를 담는 "그릇"이고, Provider는 데이터를 넣어서 "배포"하는 역할을 합니다.

Context만 존재하면 데이터가 비어 있는 상태이고, Provider로 데이터를 "주입"해야 전역에서 사용할 수 있습니다.

 

createContext로 전역상태 만들기!
Provider로 전역 상태 연결해 주기!
useContext로 전역 상태 가져와주기!

 

 

Context와 Provider를 잘 사용하는 팁!

• Context 분리하기: 유저 정보 외에 다른 전역 상태가 많아지면 Context를 여러 개로 분리하기
• 성능 최적화: Context 값이 자주 바뀌는 경우 불필요한 리렌더링 방지하기

---

02

Context API로 로그인 상태 관리하기

React의 Context API를 활용해 유저 상태를 관리하려면, 먼저 AuthProvider를 애플리케이션에 설정해야 합니다.

이 AuthProvider는 유저 정보를 전역에서 관리하고, 로그인 및 로그아웃 기능까지 깔끔하게 처리할 수 있도록 도와줍니다.

1. Context 설정하기

먼저 로그인 상태를 관리하기 위해 Context를 설정합니다.
기본값으로 undefined를 설정했으므로, 반드시 AuthProvider로 감싸 사용해야 합니다.

import { createContext } from "react";

// Context 타입 정의
type AuthContextType = {
  userId: number | null;
  isInitialized: boolean;
  login: (userId: number) => void;
  logout: () => void;
};

// Context 생성
export const AuthContext = createContext<AuthContextType | undefined>(
  undefined
);

 

2. Provider 설정하기

Provider를 통해 전역 상태를 관리합니다.

아래는 Access Token을 Cookie에서 가져와 로그인 여부를 확인하는 코드입니다.

import { ReactNode, useState, useEffect } from "react";
import { AuthContext } from "./AuthContext";
import { Cookies } from "react-cookie";

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [userId, setUserId] = useState<number | null>(null);
  const [isInitialized, setIsInitialized] = useState(false); // 초기화 상태 추적
  const cookies = new Cookies();
  const accessToken = cookies.get("access");
  
  useEffect(() => {
    const initializeAuth = async () => {
      try {
        if (accessToken) {
          setUserId(userId);
        } else {
          // 토큰 검증 실패 시
          logout();
        }
      } catch (error) {
        console.error("인증 실패:", error);
      } finally {
        setIsInitialized(true);
      }
    };

    initializeAuth();
  }, []);

  const value = { userId, isInitialized, login: () => {}, logout: () => {} };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

 

03) 로그인 메서드 추가

로그인 시 유저 ID를 업데이트하여 로그인 상태로 만듭니다.

  const login = (newUserId: number) => {
    setUserId(newUserId);
  };

 

04) 로그아웃 메서드 추가

아래처럼 userId 상태와 쿠키에서 토큰을 삭제하는 것으로도 구현가능합니다.

const logout = () => {
  setUserId(null);
  cookies.remove("accessToken");
};

 

05) AuthProvider와 메서드 연결

로그인과 로그아웃 메서드를 AuthContext.Provider의 value에 연결하여
하위 컴포넌트에서 사용할 수 있도록 설정합니다.

const value = {
  userId,
  isInitialized,
  login,
  logout,
};

---

03

AuthProvider를 애플리케이션에 연결하기

AuthProvider를 설정했으니 이제 애플리케이션에 연결해 보겠습니다.
아래처럼 루트 컴포넌트를 AuthProvider로 감싸 전역 상태를 제공합니다.

import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import AuthProvider from "./AuthProvider";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <AuthProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </AuthProvider>
);

---

04

정리

React Context API는 전역 상태를 효율적으로 관리할 수 있는 강력한 도구입니다.

Context와 Provider를 사용하면 로그인 상태와 같은 전역 데이터를 깔끔하게 관리할 수 있으며,
필요에 따라 Context를 분리하거나 성능 최적화를 통해 불필요한 리렌더링도 방지할 수 있습니다.

 

이 글이 Context API를 활용해 전역 상태를 관리하는 데 도움이 되었기를 바랍니다.