컴포넌트 재사용을 생각해서 쪼개고 쪼개고 하다보니 조상님들만 많아진 상황...
state 값 props값 전달전달하느라 써먹기 어려워죽겄다!
분명 뭔가 방법이 있을것이다 싶어
수소문을 해보니! 역시...있었다 (차노님, 승옥님 감사합니다)
Context API
context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다.
즉, 내가 놓인 상황처럼 먼 조상한테 props를 전달받고 사용할때 사용하면 된다!
API
1단계
Context 객체를 만듭니다. Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때 React는 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 현재값을 읽습니다.
const MyContext = React.createContext(defaultValue);
2단계
Provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달합니다. 값을 전달받을 수 있는 컴포넌트의 수에 제한은 없습니다.
<MyContext.Provider value={/* 어떤 값 */}>
3단계
context 변화를 구독하는 React 컴포넌트로 Context.Consumer의 자식은 함수여야합니다. 이 함수가 받는 value 매개변수 값은 해당 context의 Provider 중 상위 트리에서 가장 가까운 Provider의 value prop과 동일합니다.
<MyContext.Consumer> {value => /* context 값을 이용한 렌더링 */} </MyContext.Consumer>
