[React] (리액트 공부하기 33) Context란?

1. Context의 정의와 필요성

React에서 Context는 컴포넌트 간 데이터를 전달하기 위한 새로운 방법이다. 기존에는 부모-자식 관계를 통해 props를 통해 데이터를 전달해야 했지만, 컴포넌트 계층이 깊어질수록 코드가 복잡해지는 단점이 있었다. Context를 사용하면 중간에 있는 컴포넌트들에게 데이터를 전달하지 않고도, 특정 컴포넌트가 직접 데이터를 사용할 수 있다.

---

2. props를 사용한 방식과 Context를 사용하는 방식 비교

Props 방식: 데이터를 전달하기 위해 부모에서 자식 컴포넌트로 계속 전달해야 한다.

function App() {
  return <Parent data="Hello" />;
}

function Parent(props) {
  return <Child data={props.data} />;
}

function Child(props) {
  return <div>{props.data}</div>;
}

Context 방식: 중간 컴포넌트를 거치지 않고 데이터를 공유한다.

import React, { createContext, useContext } from "react";

const DataContext = createContext();

function App() {
  return (
    <DataContext.Provider value="Hello">
      <Child />
    </DataContext.Provider>
  );
}

function Child() {
  const data = useContext(DataContext);
  return <div>{data}</div>;
}

---

3. Context를 사용해야 할 상황

Context는 아래와 같은 경우에 사용하기 적합하다.

• 여러 컴포넌트에서 공통적으로 사용되는 데이터가 있는 경우.
  • 예: 사용자 로그인 상태, 현재 선택된 언어, UI 테마 등.
• 계층이 깊은 컴포넌트 트리에서 데이터를 전달해야 할 경우.

---

4. Context 사용법

1) Context 생성

createContext로 Context를 생성한다.

const ThemeContext = React.createContext("light"); // 기본값 설정

2) Provider로 데이터 제공

Provider를 통해 데이터를 제공하고, 하위 컴포넌트에서 접근할 수 있게 만든다.

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemeButton />;
}

3) Consumer로 데이터 소비

하위 컴포넌트에서 useContext 훅을 사용하여 데이터를 읽는다.

function ThemeButton() {
  const theme = React.useContext(ThemeContext);
  return <button theme={theme}>테마 버튼</button>;
}

---

5. Context 사용 시 고려할 점

• Context는 필요한 경우에만 사용해야 한다.
• 지나치게 많은 데이터를 Context로 관리하면 코드가 복잡해질 수 있다.
• 하위 컴포넌트가 데이터 변경 사항에 민감하게 반응해야 하는 경우 적합하다.