Q1: 리액트의 컨텍스트(Context) API란 무엇인가요?
A1: 리액트 컨텍스트는 컴포넌트 트리 전체에 전역 데이터를 쉽게 전달할 수 있도록 해주는 기능입니다. 계층 구조가 깊은 컴포넌트에 props를 일일이 전달하지 않고도 데이터를 공유할 수 있도록 설계되었습니다.

Q2: 컨텍스트를 사용하는 주요 이유는 무엇인가요?
A2: 여러 컴포넌트에서 공통적으로 사용하는 상태(예: 테마, 인증정보, 언어 설정)를 props drilling 없이 간편하게 전달하기 위해서 사용합니다.

Q3: 컨텍스트를 만드는 방법은?
A3: React.createContext() 함수를 사용하여 컨텍스트 객체를 생성합니다. 예:
```jsx
const MyContext = React.createContext(defaultValue);
```

Q4: 컨텍스트의 Provider는 무엇인가요?
A4: Provider 컴포넌트는 컨텍스트의 값을 자식 컴포넌트들에게 공급하는 역할을 합니다. Provider의 `value` prop이 하위 컴포넌트들에게 전달됩니다.
예:
```jsx

{/* 자식 컴포넌트들 */}

```

Q5: 컨텍스트 값을 자식 컴포넌트에서 어떻게 사용하나요?
A5: 여러 방법이 있습니다.
- `useContext` 훅 사용 (함수형 컴포넌트)
```jsx
const value = useContext(MyContext);
```
- 컨텍스트 Consumer 컴포넌트 사용
```jsx
{value => /* value 사용 */}

```

Q6: 컨텍스트 사용 시 주의할 점은 무엇인가요?
A6:
- 컨텍스트 값이 변경되면 해당 컨텍스트를 구독하는 모든 컴포넌트가 리렌더링됩니다.
- 너무 자주 변경되거나 많은 데이터를 넣으면 성능 저하가 발생할 수 있습니다. 따라서 상태를 잘 분리해서 필요한 곳에서만 사용하는 것이 좋습니다.
- 컨텍스트는 전역 상태 관리 솔루션을 완전히 대체하지는 않으며, 단순한 상태 공유에 적합합니다.

Q7: 기본값(defaultValue)의 역할은 무엇인가요?
A7: Provider가 없을 때, 또는 value가 명시되지 않았을 때 컨텍스트가 사용할 기본값을 지정합니다.

Q8: 컨텍스트를 중첩 사용할 수 있나요?
A8: 네, 여러 컨텍스트 Provider를 중첩하여 사용할 수 있으며, 각 컨텍스트 별로 독립적인 값을 관리 가능합니다.

Q9: 클래스형 컴포넌트에서는 어떻게 이용하나요?
A9: React 16.6 이상부터 클래스형 컴포넌트에서 `static contextType = MyContext`를 지정하거나, Consumer 컴포넌트를 사용합니다.
예:
```jsx
class MyComponent extends React.Component {
static contextType = MyContext;
render() {
const value = this.context;
return ;
}
}
```

리액트의 "컨텍스트(Context)" API는 컴포넌트 트리에서 데이터를 전역적으로 관리하고 전달할 수 있는 방법을 제공합니다.

일반적으로 리액트에서는 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하지만, 여러 단계의 컴포넌트를 거쳐야 할 경우 props를 계속 전달하는 것이 번거로울 수 있습니다.

이럴 때 컨텍스트 API를 사용하면 더 간편하게 데이터를 공유할 수 있습니다.

컨텍스트 API의 주요 구성 요소1. Context 생성 : `React.createContext()`를 사용하여 새로운 컨텍스트를 생성합니다.

이 함수는 두 가지 속성을 가진 객체를 반환합니다: `Provider`와 `Consumer`.2. Provider : `Provider`는 컨텍스트의 값을 제공하는 컴포넌트입니다.

이 컴포넌트의 `value` prop을 통해 하위 컴포넌트에 전달할 데이터를 설정합니다.

3. Consumer : `Consumer`는 컨텍스트의 값을 구독하는 컴포넌트입니다.

이 컴포넌트는 컨텍스트의 현재 값을 가져와서 사용할 수 있습니다.

사용 방법1. 컨텍스트 생성 : ```javascript import React from 'react'; const MyContext = React.createContext(); ```2. Provider 사용 : ```javascript const App = () => { const value = { user: 'John Doe', age: 30 }; return ( ); }; ```3. Consumer 사용 : ```javascript const ChildComponent = () => { return ( {({ user, age }) => (

User: {user}

Age: {age}

)} ); }; ``` 훅을 이용한 컨텍스트 사용리액트 16.8 이상에서는 `useContext` 훅을 사용하여 더 간편하게 컨텍스트를 사용할 수 있습니다.

```javascriptimport React, { useContext } from 'react';const ChildComponent = () => { const { user, age } = useContext(MyContext); return (

User: {user}

Age: {age}

);};``` 요약리액트의 컨텍스트 API는 컴포넌트 간에 데이터를 쉽게 공유할 수 있도록 도와줍니다.

`Provider`를 통해 데이터를 제공하고, `Consumer` 또는 `useContext` 훅을 통해 데이터를 소비할 수 있습니다.

이를 통해 복잡한 props 전달 문제를 해결하고, 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.