[React] Context API 사용법

Context API에 대해 정리해 볼게요.

React에서 상태를 관리할 때, 보통 props를 이용하여 부모에서 자식 컴포넌트로 데이터를 전달합니다.

하지만 컴포넌트의 깊이가 깊어질수록 props drilling(프로퍼티를 계속 전달하는 문제)이 발생합니다.

이를 해결하기 위해 Context API를 사용하면, 전역적으로 상태를 관리하고 필요한 곳에서 바로 가져올 수 있습니다.

반응형

---

Context API 기본 개념

Context API는 크게 3가지 요소로 구성됩니다.

1. createContext() - Context 생성
2. Provider - 데이터를 제공하는 역할
3. Consumer 또는 useContext - 데이터를 사용하는 역할

---

Context API 사용 방법

1️⃣ Context 생성하기 (UserContext.js)

import { createContext, useState } from "react";

export const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState("John Doe");

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

 

2️⃣ Context Provider로 감싸기 (App.js)

import React from "react";
import { UserProvider } from "./UserContext";
import Home from "./Home";

function App() {
  return (
    <UserProvider>
      <Home />
    </UserProvider>
  );
}

export default App;

 

3️⃣ useContext로 값 가져오기 (Home.js)

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

const Home = () => {
  const { user, setUser } = useContext(UserContext);

  return (
    <div>
      <h1>Welcome, {user}!</h1>
      <button onClick={() => setUser("Alice")}>Change User</button>
    </div>
  );
};

export default Home;

Context API의 장점

✅ Props Drilling 방지 - 중간 컴포넌트가 불필요한 props를 전달할 필요X

✅ 전역 상태 관리가 쉬움 - Redux 같은 복잡한 라이브러리 없이 전역 관리 가능

✅ 재사용성이 높음 - 다양한 컴포넌트에서 동일한 상태를 쉽게 사용 가능

---

5. 마무리

Context API는 Redux를 사용할 만큼 복잡하지 않은 경우, 전역 상태 관리를 쉽게 할 수 있는 좋은 방법입니다.

작은 프로젝트에서는 Context API만으로 충분할 수 있으니, 적절한 상황에 맞춰 활용해 보세요! 🚀