전역데이터 다루기 Context API

개요

React의 Context API는 전역 데이터(예: 사용자 인증 정보, 테마, 언어 설정 등)를 관리하고 컴포넌트 트리 전체에 걸쳐 쉽게 접근할 수 있게 해주는 방법을 제공한다. 이는 prop drilling(하위 컴포넌트로 props를 계속 전달하는 것)을 피하기 위해 유용하게 사용된다.

예를들어 웹애플리케이션에서 사용자의 로그인 상태와 테마 설정을 전역적으로 관리하고자 할 때 Context API를 사용할 수 있다. 이를 통해 어플리케이션의 여러 부분에서 현재 로그인된 사용자 정보와 테마 색상 등을 쉽게 접근하고 업데이트할 수 있다.

사용자 인증 상태 관리

사용자 인증 상태를 관리하는 간단한 예를 들어보자.

1. AuthContext 생성

먼저 사용자 인증 정보를 저장하고 접근할 수 있는 AuthContext를 생성한다.

// AuthContext.tsx
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface AuthContextType {
  user: string | null;
  login: (user: string) => void;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

interface AuthProviderProps {
  children: ReactNode;
}

export const AuthProvider = ({ children }: AuthProviderProps) => {
  const [user, setUser] = useState<string | null>(null);

  const login = (user: string) => setUser(user);
  const logout = () => setUser(null);

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

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};

2. AuthProvider로 애플리케이션를 감싸기

index.tsx 또는 최상위 컴포넌트에서 AuthProvider 컴포넌트를 사용하여 애플리케이션을 감싸준다. 이러면 애플리케이션의 모든 부분에서 인증 상태에 접근할 수 있게된다.

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { AuthProvider } from './AuthContext';

ReactDOM.render(
  <React.StrictMode>
    <AuthProvider>
      <App />
    </AuthProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

3. useAuth Hook 사용

이제 어느 컴포넌트에서든 useAuth Hook을 사용하여 로그인 상태를 조회하거나 변경할 수 있다.

// SomeComponent.tsx
import React from 'react';
import { useAuth } from './AuthContext';

const SomeComponent = () => {
  const { user, login, logout } = useAuth();

  return (
    <div>
      {user ? (
        <>
          <p>환영합니다, {user}!</p>
          <button onClick={() => logout()}>로그아웃</button>
        </>
      ) : (
        <button onClick={() => login('User123')}>로그인</button>
      )}
    </div>
  );
};

export default SomeComponent;

Context API를 사용하여 웹애플리케이션에서 사용자 인증상태를 전역적으로 관리할 수 있는데 Context를 사용함으로써 여러 컴포넌트에 걸쳐 props를 전달하지 않고도 필요한 데이터에 접근할 수 있게 된다.