useContext() 란?

언제 사용하나?

• 여러 컴포넌트를 통해 props 값을 전달해야 할 때
• 여러 컴포넌트에서 사용하는 값이 있을 때
• 예제 : 테마 적용, 로그인 상태 관리, 라우팅, 스테이트 관리

Context 란?

부모 컴포넌트가 하위 컴포넌트들이 접근할 수 있는 값을 다룰 수 있게 한다.
예를 들어 자식 컴포넌트가 부모 컴포넌트에게 state 값을 전달해야 하는 상황이라면, 두 컴포넌트 간 depth 가 매우 먼 경우 prop을 여러번 거쳐서 내려오고 올라가게 된다. 이 문제를 prop drilling 이라고 한다. Context 는 이런 문제에 유용하게 사용될 수 있다.

어떻게 사용하지?

1. Context 를 생성

// MyContext.js
import { createContext } from 'react';
export const MyContext = createContext(1);

createContext 에 context의 초기값을 넣어준다.

2. Data 가 필요한 곳에 Context를 사용하기

// ChildComponent.js
import { useContext } from 'react';
import { MyContext } from './MyContext.js';

export default function ChildComponent({ children }) {
  const val = useContext(MyContext);
  // ...
}

useContext() 훅을 import 하고 component 내부에서 useContext()를 호출한다.

3. Context를 Provide 하기

// ParentComponent.js
import { MyContext } from './MyContext.js';

export default function ParentComponent({val, children}) {
	return (
    	<MyContext.Provider value={val}>
        	{children}
        </MyContext.Provider>
    )
}

React는 'ParentComponent 내부의 어떤 컴포넌트라도 MyContext를 요청하면 지금 제공하는 val 을 제공해주세요' 라고 해석한다. 자식컴포넌트는 UITree 에서 가장 가까운 <MyContext.Provider> 를 참조해 값을 사용할 것이다.

컨텍스트 특징

위에서도 설명한 것과 같이 컴포넌트는 자신을 둘러싼 가까운 컨텍스트의 값을 사용한다. 그리고 createContext() 로 만들어진 서로 다른 Context는 상대의 값을 덮어쓰지 않는다. 이는 하나의 컴포넌트가 여러 다른 컨텍스트를 사용하는 것이 가능하다.

컨텍스트 대신 사용할 수 있는 방법

컨텍스트가 사용하기 쉬워 남용되기 쉽다. 컨택스트 대신 사용할 수 있는 방법을 소개한다.

• props를 넘기는것으로 시작하기
• 컴포넌트를 추출해서 children으로 JSX 를 넘기기

참고

https://react.dev/learn/passing-data-deeply-with-context