[React 기초] Context API 상태 관리

Context API 상태 관리 📦

React에서 컴포넌트 간 데이터를 전달할 때
보통 props 를 사용합니다.

하지만 컴포넌트가 많아지면
props 전달이 매우 복잡해질 수 있습니다.

이럴 때 사용하는 것이
Context API 입니다.

👉 Context API는
전역 상태를 관리하는 기능입니다.

오늘 배울 내용 🎯

✔ Context API란 무엇인가
✔ 왜 사용하는가
✔ 기본 사용 방법
✔ Provider
✔ useContext

주요 포인트 Top3

01. Context API란 무엇인가 🧩

React에서는 데이터를 전달할 때
보통 props를 사용합니다.

예를 들어

App
 ↓
Header
 ↓
User

이 구조에서 User 컴포넌트에
데이터를 전달하려면

App → Header → User

이렇게 계속 전달해야 합니다.

이것을

👉 props drilling 이라고 합니다.

이 문제를 해결하기 위해
Context API를 사용합니다.

02. Context API 기본 개념 📌

Context API 흐름

Context 생성
↓
Provider 설정
↓
useContext 사용

이 흐름을 이해하는 것이 중요합니다.

03. Context 생성하기 ⚙️

먼저 Context를 생성합니다.

import { createContext } from "react";
 
export const UserContext = createContext();

👉 Context 생성 완료

04. Provider 설정하기 📦

Provider로 감싸줍니다.

import { UserContext } from "./UserContext";
 
function App() {
  return (
    <UserContext.Provider value="홍길동">
      <Header />
    </UserContext.Provider>
  );
}

👉 이제 Header 아래 컴포넌트에서 사용 가능

05. useContext 사용하기 🧩

import { useContext } from "react";
import { UserContext } from "./UserContext";
 
function User() {
  const user = useContext(UserContext);
 
  return <div>{user}</div>;
}

👉 Context 값 사용 완료

06. 전체 흐름 🔄

Context 생성

import { createContext } from "react";
 
export const UserContext = createContext();

Provider 설정

<UserContext.Provider value="홍길동">
  <App />
</UserContext.Provider>

useContext 사용

const user = useContext(UserContext);

👉 Context 사용 완료

07. 실제 사용 예제 🔥

import { createContext, useContext } from "react";
 
const UserContext = createContext();
 
function App() {
  return (
    <UserContext.Provider value="홍길동">
      <Header />
    </UserContext.Provider>
  );
}
 
function Header() {
  return <User />;
}
 
function User() {
  const user = useContext(UserContext);
 
  return <div>{user}</div>;
}
 
export default App;

이 코드에서는

✔ App에서 값 설정
✔ User에서 값 사용

08. Context API 언제 사용하나 📌

다음과 같은 경우 사용합니다.

로그인 상태
유저 정보
테마
언어 설정

👉 여러 컴포넌트에서 사용하는 데이터

09. Context API 사용 시 주의사항 ⚠️

Context는
너무 많이 사용하면 성능 문제가 발생할 수 있습니다.

그래서 보통

로그인 상태
테마
설정

이 정도만 사용하는 것이 좋습니다.

GOYO.’s Tip 💡

Context API는
props 전달을 줄이기 위해 사용합니다.

가장 많이 사용하는 예는
로그인 상태 관리입니다.

그리고 Context API는
React 기본 상태 관리 방법입니다.

나중에 Zustand 같은
상태 관리 라이브러리를 배우기 전에
Context API를 먼저 이해하는 것이 좋습니다.

마무리 🎯

이번 글에서는
Context API 상태 관리를 알아봤습니다.

✔ Context 개념
✔ Provider
✔ useContext
✔ 실제 예제

다음 글에서는
Context + useState 상태 관리를 알아보겠습니다.