React 에서 Context API 란?

    
 ### **Context API란?**

React의 **Context API**는 컴포넌트 트리 전체에 전역적인 데이터를 쉽게 공유할 수 있도록 도와주는 기능입니다. 일반적으로 React에서는 데이터가 부모에서 자식 컴포넌트로 **props**를 통해 전달됩니다. 하지만 트리 구조가 복잡해질수록 상위 컴포넌트에서 하위 컴포넌트로 여러 단계에 걸쳐 데이터를 전달하는 것이 번거로울 수 있습니다. 이런 경우 Context API를 사용하면, 모든 컴포넌트에서 전역적으로 접근할 수 있는 데이터를 설정할 수 있어 props 드릴링(여러 단계의 props 전달)을 피할 수 있습니다.

### **Context API의 주요 개념**

1. **Context 생성**: `React.createContext()`를 사용하여 Context를 생성합니다.
2. **Provider**: `Provider` 컴포넌트는 Context에서 데이터를 공급하는 역할을 하며, 이 `Provider`를 통해 트리의 하위 컴포넌트들이 Context에 저장된 데이터를 접근할 수 있습니다.
3. **Consumer**: 하위 컴포넌트는 `Consumer`를 사용하거나 `useContext` 훅을 이용하여 Context 데이터를 소비할 수 있습니다.

### **Context API 기본 사용 예시**

#### 1. Context 생성

```jsx
import React, { createContext } from 'react';

// Context 생성
const MyContext = createContext();
```

#### 2. Provider 설정

Provider는 Context에서 제공할 데이터를 설정하는 컴포넌트로, 하위 컴포넌트들이 이 데이터에 접근할 수 있게 해줍니다. Provider는 컴포넌트 트리의 상위에 위치시켜야 하며, 해당 Provider 내부에 있는 모든 하위 컴포넌트들은 Context의 데이터를 접근할 수 있습니다.

```jsx
import React, { useState } from 'react';
import { MyContext } from './MyContext'; // 생성한 Context import

function MyProvider({ children }) {
  const [value, setValue] = useState("Hello, World!");

  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
}

export default MyProvider;
```

#### 3. Consumer 또는 `useContext`로 데이터 접근

이제 Provider로 감싸진 하위 컴포넌트에서 Context 데이터를 사용할 수 있습니다. `useContext` 훅을 사용하여 Context의 값을 불러옵니다.

```jsx
import React, { useContext } from 'react';
import { MyContext } from './MyContext';

function MyComponent() {
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue("New Value!")}>Change Value</button>
    </div>
  );
}

export default MyComponent;
```

### **Context API 사용 흐름**

1. **Context 생성**: `createContext()`로 전역 상태를 저장할 Context를 생성합니다.
2. **Provider 설정**: `Provider` 컴포넌트를 사용해 Context의 값을 설정하고, 컴포넌트 트리 전체에 공급합니다.
3. **Consumer 또는 `useContext`로 데이터 사용**: 하위 컴포넌트에서 `useContext` 훅을 사용해 데이터를 읽거나 업데이트할 수 있습니다.

### **Context API가 유용한 경우**

- **전역 상태 관리**: 사용자 인증 상태, 테마 설정, 다크 모드, 다국어 지원 등 앱 전체에서 공유되는 상태를 관리할 때 유용합니다.
- **컴포넌트 트리 깊은 곳에 데이터를 전달할 때**: 중간 단계의 컴포넌트들이 데이터를 직접 사용하지 않는데도 props로 전달해야 하는 복잡한 상황을 피할 수 있습니다.

### **Context API와 Redux 비교**

- **Context API**: 비교적 간단한 전역 상태 관리에 적합합니다. Context API는 React 내장 기능으로 작은 규모의 애플리케이션이나 특정 데이터를 전역에서 관리할 때 주로 사용됩니다.
- **Redux**: 복잡한 상태 관리, 다양한 비동기 작업, 미들웨어 등을 지원하며, 큰 규모의 애플리케이션에서 상태 관리를 보다 체계적으로 할 수 있게 도와줍니다.

### 예시 구조

1. `App.js`에서 Provider로 앱을 감싸기:
   ```jsx
   import React from 'react';
   import MyProvider from './MyProvider';
   import MyComponent from './MyComponent';

   function App() {
     return (
       <MyProvider>
         <MyComponent />
       </MyProvider>
     );
   }

   export default App;
   ```

2. `MyComponent.js`에서 `useContext`로 데이터 사용:
   ```jsx
   import React, { useContext } from 'react';
   import { MyContext } from './MyContext';

   function MyComponent() {
     const { value } = useContext(MyContext);

     return <div>{value}</div>;
   }

   export default MyComponent;
   ```

이와 같은 방식으로 Context API를 사용하면 전역 상태를 관리하고, props를 여러 단계에 걸쳐 전달하는 번거로움을 줄일 수 있습니다.