https://react.dev/learn/passing-data-deeply-with-context
“Passing Data Deeply with Context” Usually, you will pass information from a parent component to a child component via props. But passing props can become verbose and inconvenient if you have to pass them through many components in the middle, or if many components in your app need the same information. Context lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props.
리액트 공식문서에서는 Context를 props 깊게 전달해야될 때 함께 사용된다 라고 정의 내려져 있다. 컨텍스트는 부모 구성 요소가 그 아래의 전체 트리에 데이터를 제공하도록 한다. → 관리에 대한 내용이 전혀 없으며 값의 '전달', '공유'만을 언급한다.
나는 퍼넬 패턴을 고안할 때 Context API vs Recoil 이렇게 생각하며 → 즉 Context API == 상태 관리 라이브러리로 전역으로 상태를 관리하기 위해 Context API를 도입했는데, 애초에 이 둘은 비교선상이 알맞지 않았다.
https://react.dev/learn/passing-data-deeply-with-context
But passing props can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. The nearest common ancestor could be far removed from the components that need data, and lifting state up that high can lead to a situation called “prop drilling”.
⓵ Props drilling은 React 애플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어이다.
이는 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것을 의미한다. 이러한 중간 컴포넌트는 원하는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 필요하지만 해당 값을 직접 사용하지 않는 경우에도 프로퍼티를 받고 전달해야 한다는 특징이 있다
⓶ Props drilling으로 발생하는 문제점
이러한 Props drilling의 특징으로 Context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 값을 공유하도록 할 수 있다.
<aside> <img src="/icons/subtitles_gray.svg" alt="/icons/subtitles_gray.svg" width="40px" /> 즉, Context API에 대하여 많은 개발자들이 useContext를 상태 관리를 위한 API로 오해하고 있다. 엄밀히 말하면 Context는 Props drilling 극복을 위한 방법 즉, 상태를 주입해 주는 API이다.
</aside>
⓵ React.createContext 메소드를 통하여 context 객체를 만들어 사용한다.