[리액트] Context API 이론

기존 props의 문제점 (Props drilling)
-> 계층적으로 내려나가는 컴포넌트의 구조상 해당 prop이 필요 없음에도 자식 컴포넌트에게 전해주기 위해 갖고 있는 경우가 발생
-> 회색 컴포넌트 부분은 prop이 필요 없는데 자식 컴포넌트한테 전해주기 위해 컴포넌트를 갖게됨

-> 이런 경우 예를 들어 name이라는 이름의 prop을 age로 바꿔야 하는 경우 각각의 컴포넌트 파일에 들어가서 전부 수정해야하는 귀찮은 일 발생

이러한 문제를 방지하기 위해 등장한 것이 Context~

Context

리액트에서 Context는 컴포넌트에게 Props를 사용하지 않고 필요한 데이터를 넘겨줄 수 있게 하는 기능
(Context API라고도 불림)

첫번째 사진처럼 중간에 회색 컴포넌트들이 중간에 Data A라는 props를 갖지 않고 Context API를 통해서 Data A prop이 필요한 녹색 컴포넌트에 prop을 전달

Context 사용법

Context API를 사용할 때 주의사항
Context의 값이 변경될 때마다 하위 컴포넌트들이 다시 렌더링되므로, 성능에 영향을 줄 수 있음

✅ Context란?

Context는 컴포넌트 트리 전체에 데이터를 공급해주는 React의 전역 데이터 전달 도구예요.

쉽게 말하면…

🤔 "매번 props로 하나하나 넘기는 거 너무 불편해!"
→ 이럴 때 Context를 사용하면
부모 → 자식 → 손자 → 증손자로 props를 계속 넘기지 않고
👉 바로 원하는 하위 컴포넌트에 데이터를 전달할 수 있어요.

💬 언제 쓰나?

사용자 로그인 정보 (UserContext)

테마 설정 (ThemeContext)

다국어(i18n) 언어 설정 (LanguageContext)

🔸 먼저 props 방식은 이렇게 생겼어:

<<App>
  <Parent>
    <Child>
      <GrandChild />
    </Child>
  </Parent>
</App>

예를 들어 App에서 "이름 = 주연"이라는 정보를 GrandChild까지 전달하고 싶다면?

❗️매번 props로 내려줘야 해

<Parent name="주연" />
<Child name={props.name} />
<GrandChild name={props.name} />

→ 귀찮지? 이름만 전달하려고 다 거쳐야 해...

🌟 그래서 등장한 게 Context
"props 없이도, 컴포넌트 트리 아래쪽 아무 데서나 바로 접근할 수 있게 해줄게!"

🧁 비유로 이해해볼게
🔸 props는 "부모가 아이에게 도시락 직접 쥐어주는 것"
할아버지 → 아빠 → 나 순으로 밥 도시락을 직접 들고 전달해야 해

중간에 있는 사람들은 전달만 함

🔸 Context는 "냉장고에 도시락 넣어놓고 아무나 꺼내 먹는 것"
한 번만 냉장고(Context)에 넣어두면,

아래쪽 어느 컴포넌트든지 꺼내먹기(useContext)만 하면 돼!

✅ 진짜 예시로 보기
목표: App에서 만든 사용자 이름을 GrandChild에서 바로 쓰기

1. Context 만들기

// UserContext.ts
import { createContext } from 'react';

export const UserContext = createContext(''); // 기본값은 빈 문자열

2. App에서 값을 "냉장고"에 넣어주기

// App.tsx
import { UserContext } from './UserContext';
import Parent from './Parent';

function App() {
  return (
    <UserContext.Provider value="주연">
      <Parent />
    </UserContext.Provider>
  );
}

✔️ UserContext.Provider 가 냉장고!
✔️ 그 안에 value="주연" 을 넣어준 거야

3. 중간 Parent, Child는 그냥 통과

function Parent() {
  return <Child />;
}

function Child() {
  return <GrandChild />;
}

4. GrandChild에서 꺼내서 쓰기

// GrandChild.tsx
import { useContext } from 'react';
import { UserContext } from './UserContext';

function GrandChild() {
  const name = useContext(UserContext); // 냉장고에서 바로 꺼냄
  return <p>안녕하세요, {name}님!</p>;
}

✅ 정리 요약

개념	설명
createContext()	냉장고 만들기 (Context 생성)
Provider	냉장고에 값 넣는 부분 (최상위에서 감싸기)
useContext()	냉장고에서 값 꺼내 쓰기 (하위 컴포넌트 어디서든 가능)
장점	props를 여러 단계로 넘기지 않아도 됨
주의	너무 많이 쓰면 코드 흐름이 오히려 복잡해짐 (적당히 사용!)