React createContext / useContext

React에서는 여러 컴포넌트 간에 데이터를 공유하고 관리하는 방법으로 Context API를 제공합니다.

createContext와 useContext는 Context API의 핵심 요소로, 상태를 전역적으로 관리할 수 있게 도와줍니다

 

 

Context API란?

Context API는 React 애플리케이션 내에서 컴포넌트 간에 데이터를 전달하는 방법을 제공합니다.

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 props 방식을 넘어서, 더 깊은 계층 구조에서 데이터를 효율적으로 관리할 수 있게 해줍니다.

Context API의 핵심은 Provider와 Consumer입니다.

Provider는 데이터를 하위 컴포넌트에 전달하고, Consumer는 그 데이터를 받아서 사용하는 역할을 합니다. 

 

 

createContext 사용법

createContext는 Context 객체를 생성하는 함수입니다.

이 객체는 전역 상태를 관리하는데 사용되며, 해당 객체를 통해 상태를 Provider를 사용하여 하위 컴포넌트로 전달할 수 있습니다.

import React, { createContext, useState, ReactNode } from 'react';

// 1. 타입 정의
interface User {
  id: number;
  name: string;
  email: string;
}

interface UserContextType {
  user: User | null;
  setUser: (user: User | null) => void;
}

// 2. Context 생성
const UserContext = createContext<UserContextType | undefined>(undefined);

// 3. Context Provider 컴포넌트
interface UserProviderProps {
  children: ReactNode;
}

export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
  const [user, setUser] = useState<User | null>(null);

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

 

useContext 사용법

useContext 훅은 Context의 값을 구독하는 데 사용됩니다.

컴포넌트에서 useContext를 호출하면, Provider에서 제공하는 값을 쉽게 사용할 수 있습니다.

import React, { useContext } from 'react';
import { UserContext } from './UserProvider';

const UserProfile: React.FC = () => {
  const context = useContext(UserContext);

  if (!context) {
    throw new Error('UserProfile must be used within a UserProvider');
  }

  const { user, setUser } = context;

  const handleLogin = () => {
    setUser({ id: 1, name: 'John Doe', email: 'john@example.com' });
  };

  return (
    <div>
      {user ? (
        <div>
          <h1>Welcome, {user.name}!</h1>
          <p>Email: {user.email}</p>
        </div>
      ) : (
        <button onClick={handleLogin}>Log in</button>
      )}
    </div>
  );
};

 

전체 구조 예시

이제 UserProvider와 UserProfile을 함께 사용하는 예제를 작성해 보겠습니다.

import React from 'react';
import { UserProvider } from './UserProvider';
import UserProfile from './UserProfile';

const App: React.FC = () => {
  return (
    <UserProvider>
      <UserProfile />
    </UserProvider>
  );
};

export default App;