React에서 useContext 훅은 어떻게 사용하나요?

Q1: useContext 훅이란 무엇인가요?
A1: useContext 훅은 React에서 Context API를 쉽게 사용하는 데 도움을 주는 훅입니다. 컴포넌트 내에서 Context에 저장된 값을 구독하여 상태를 공유할 수 있습니다.

Q2: useContext를 사용하려면 어떻게 해야 하나요?
A2: 먼저 React.createContext()로 Context를 생성합니다. 그 후 Context.Provider로 값을 감싸서 하위 컴포넌트에 전달하며, 하위 컴포넌트에서 useContext(Context)를 호출해 값을 읽습니다.

Q3: useContext 사용 예제가 있나요?
A3:
```jsx
import React, { createContext, useContext } from 'react';

// 1. Context 생성
const MyContext = createContext();

function Parent() {
const sharedValue = 'Hello, Context!';

return (
// 2. Provider로 값 전달



);
}

function Child() {
// 3. useContext로 값 사용
const value = useContext(MyContext);
return ;
}
```

Q4: useContext는 언제 사용해야 하나요?
A4: 여러 컴포넌트가 공통으로 사용하는 데이터를 깊은 컴포넌트 트리에서 props 없이 쉽게 접근하고자 할 때 사용합니다.

Q5: useContext 사용 시 주의할 점이 있나요? A5:
- Provider의 value가 변경되면 해당 Context를 구독하는 모든 컴포넌트가 리렌더링될 수 있어 성능에 영향을 줄 수 있습니다.
- 값은 객체나 함수일 경우 useMemo나 useCallback으로 메모이제이션하는 것이 좋습니다.
- Context는 전역 상태 관리에 적합하지만, 너무 많은 데이터를 넣으면 코드가 복잡해질 수 있습니다.

Q6: useContext와 props 전달 방식의 차이점은 무엇인가요?
A6: props는 부모에서 자식으로 명시적으로 전달하지만, useContext는 중간 컴포넌트에 신경 쓰지 않고 원하는 깊이의 컴포넌트에서 직접 값을 읽을 수 있습니다.

Q7: 여러 Context를 동시에 사용할 수 있나요?
A7: 네, 여러 Context를 각각 useContext 훅으로 호출하여 사용할 수 있습니다.

Q8: useContext로 Context 값을 변경할 수도 있나요?
A8: useContext는 Context 값을 읽기만 합니다. 값을 변경하려면 Provider에 상태를 두고 변경 함수를 함께 전달하여 사용자가 상태를 업데이트하도록 해야 합니다.

예:
```jsx
const MyContext = createContext();

function Parent() {
const [value, setValue] = useState('Hello');

return (



);
}

function Child() {
const { value, setValue } = useContext(MyContext);
return setValue('Hi!')}>{value};
}
```

---

이처럼 useContext 훅은 Context API를 간편하게 활용할 수 있는 강력한 도구로, 전역 상태나 테마, 인증 상태 등을 공유할 때 매우 유용합니다.

React에서 `useContext` 훅은 React의 Context API와 함께 사용되어, 컴포넌트 트리에서 데이터를 전역적으로 공유할 수 있도록 도와줍니다.

이 훅을 사용하면, 여러 컴포넌트가 동일한 데이터에 접근할 수 있으며, props를 통해 데이터를 일일이 전달할 필요가 없어집니다.

아래에서 `useContext` 훅의 사용법을 단계별로 설명하겠습니다.

1. Context 생성하기 먼저, Context를 생성해야 합니다.

`React.createContext` 함수를 사용하여 Context를 생성할 수 있습니다.

이 함수는 두 개의 인자를 받을 수 있으며, 첫 번째 인자는 기본값입니다.

기본값은 Context를 제공하는 컴포넌트가 없을 때 사용됩니다.

```javascript import React, { createContext } from 'react'; const MyContext = createContext(defaultValue); ```

2. Context Provider 만들기 Context를 사용하기 위해서는 Provider를 사용하여 하위 컴포넌트에 데이터를 전달해야 합니다.

Provider는 `value` prop을 통해 하위 컴포넌트에 전달할 값을 설정합니다.

```javascript const MyProvider = ({ children }) => { const value = { /* 공유할 데이터 */ }; return ( {children} ); }; ```

3. useContext 훅 사용하기 이제 하위 컴포넌트에서 `useContext` 훅을 사용하여 Context의 값을 가져올 수 있습니다.

`useContext`는 Context 객체를 인자로 받아 해당 Context의 현재 값을 반환합니다.

```javascript import React, { useContext } from 'react'; const MyComponent = () => { const contextValue = useContext(MyContext); return (

{/* contextValue를 사용하여 UI를 구성 */}

{contextValue.someProperty}

); }; ```

4. 전체 구조 예시 이제 위의 모든 단계를 통합하여 전체 구조를 보여드리겠습니다.

```javascript import React, { createContext, useContext } from 'react'; // 1. Context 생성 const MyContext = createContext(); //

2. Provider 컴포넌트 const MyProvider = ({ children }) => { const value = { someProperty: 'Hello, World!' }; return ( {children} ); }; //

3. useContext 훅을 사용하는 컴포넌트 const MyComponent = () => { const contextValue = useContext(MyContext); return (

{contextValue.someProperty}

); }; //

4. 전체 애플리케이션 구조 const App = () => { return ( ); }; export default App; ```

5. Context의 장점 - 전역 상태 관리 : Context를 사용하면 전역 상태를 관리할 수 있어, 여러 컴포넌트에서 동일한 데이터를 쉽게 공유할 수 있습니다.

- props drilling 방지 : 여러 단계의 컴포넌트를 거치지 않고도 데이터를 전달할 수 있어, props drilling 문제를 해결할 수 있습니다.

- 유지보수 용이 : Context를 사용하면 코드의 가독성이 높아지고, 유지보수가 쉬워집니다.



6. 주의사항 - 성능 문제 : Context의 값이 변경되면 해당 Context를 사용하는 모든 컴포넌트가 리렌더링됩니다.

따라서 자주 변경되는 값을 Context로 관리하는 것은 성능에 영향을 미칠 수 있습니다.

이 경우, `useMemo`나 `useReducer`와 같은 훅을 사용하여 최적화를 고려해야 합니다.

- Context의 범위 : Context는 컴포넌트 트리 내에서만 유효하므로, 필요한 범위에 맞게 Provider를 설정해야 합니다.

이와 같이 `useContext` 훅을 사용하면 React 애플리케이션에서 전역 상태를 효과적으로 관리하고, 컴포넌트 간의 데이터 공유를 간편하게 할 수 있습니다.