React | Context API

Context API

전역적인 상태를 관리하고, 컴포넌트 간 데이터를 쉽게 공유할 수 있도록 도와주는 API

일반적으로 컴포넌트 트리의 깊은 곳까지 props를 전달해야 하는 상황이 발생할 때 props drilling을 피하기 위해 사용함

Context API는 React 내장 기능이라 소규모 상태 공유에 적합

다만, 대규모 애플리케이션에서 복잡한 상태를 관리하려면 Redux나 Recoil 같은 외부 상태 관리 라이브러리와 함께 사용하는 것이 더 효과적일 수 있다

 

Context API 구성요소

• Context 객체 : React.createContext()를 사용하여 Context 객체를 생성
• Provider : 이 컴포넌트를 사용하여 Context의 값을 제공하며, 하위 컴포넌트들이 이 값을 사용할 수 있도록 함
• Consumer: Context의 값을 사용할 컴포넌트 useContext Hook을 통해 값에 접근할 수도 있음

 

---

Context API 사용법

1단계 : Context 생성

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

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

 

2단계 : Provider 컴포넌트 만들기

Provider 컴포넌트를 만들어서 Context의 값을 설정하고 하위 컴포넌트에 전달

function AuthProvider({ children }) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const login = () => setIsLoggedIn(true);
  const logout = () => setIsLoggedIn(false);

  return (
    // 2. Provider를 통해 상태와 함수를 하위 컴포넌트에 제공
    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

 

3단계 : Consumer 컴포넌트 만들기

Context의 값을 사용할 컴포넌트 생성, useContext Hook을 사용해 값을 가져옴

function LoginStatus() {
  const auth = useContext(AuthContext); // 3. useContext를 통해 Context 값 가져오기

  return (
    <div>
      {auth.isLoggedIn ? (
        <p>로그인 상태입니다</p>
      ) : (
        <p>로그아웃 상태입니다</p>
      )}
      <button onClick={auth.isLoggedIn ? auth.logout : auth.login}>
        {auth.isLoggedIn ? '로그아웃' : '로그인'}
      </button>
    </div>
  );
}

 

4단계 : App 컴포넌트에서 Provider로 감싸기

App컴포넌트를 Provider로 감싸서 하위 컴포넌트들이 Context를 사용할 수 있도록 함

export default function App() {
  return (
    <AuthProvider>
      <LoginStatus />  {/* 이 컴포넌트는 Context의 값을 사용할 수 있습니다 */}
    </AuthProvider>
  );
}

 

전체 코드

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

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

function AuthProvider({ children }) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const login = () => setIsLoggedIn(true);
  const logout = () => setIsLoggedIn(false);

  return (
    // 2. Provider를 통해 상태와 함수를 하위 컴포넌트에 제공
    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

function LoginStatus() {
  const auth = useContext(AuthContext); // 3. useContext를 통해 Context 값 가져오기

  return (
    <div>
      {auth.isLoggedIn ? (
        <p>로그인 상태입니다</p>
      ) : (
        <p>로그아웃 상태입니다</p>
      )}
      <button onClick={auth.isLoggedIn ? auth.logout : auth.login}>
        {auth.isLoggedIn ? '로그아웃' : '로그인'}
      </button>
    </div>
  );
}

export default function App() {
  return (
    <AuthProvider>
      <LoginStatus />
    </AuthProvider>
  );
}

 

---

Context API 사용시 장단점

장점

• 간편한 상태 공유 : 깊은 컴포넌트 트리에서 상태를 간편하게 공유할 수 있음
• 구조적 유연성 : Context를 사용하면 필요한 곳에만 Provider를 추가하여 상태의 범위를 조정할 수 있음

단점

• 성능 문제 : Context의 값이 변경될 때마다 모든 하위 Consumer가 다시 렌더링 될 수 있음. 필요한 곳에서만 Context를 사용하는 것이 좋음
• 상태 관리 복잡성 : 상태가 많아질 경우 Context파일이 여러 개로 나뉠 수 있으며, 이를 관리하는 데 복잡성이 증가할 수 있음