이런 컴포넌트 트리가 있다고 했을때 주황색으로 칠해진 컴포넌트에서만 다뤄야 할 데이터가 존재할 수 있다.
이런 경우는 보통 최상위 컴포넌트에서 전역상태로 데이터를 관리한다.
그리고 최상위 컴포넌트에 있는 데이터를 하위 컴포넌트로 보내주기 위해 props로 전달을 통해 하위 컴포넌트는 상위 컴포넌트에 있는 데이터를 받아 올 수 있다.
이런식으로 props를 통해 상위에 있는 데이터를 하위 컴포넌트로 보내주는 것을 마치 땅을 파듯이 상위 컴포넌트에서 하위 컴포넌트로 반복해서 prop을 내려주는 것 같다고 해서 props drilling이라고 한다.
그렇지만 이렇게 점점 하위 컴포넌트가 늘어나면 props drilling으로 데이터를 전달하면 매우 복잡해지게 비효율적인 코드를 작성해야 한다.
그래서 상위컴포넌트에 있는 데이터를 쓰고 싶은 하위 컴포넌트에서 바로 사용할 수 있게 해주는 것이 바로 context-API이다.
Context-API
(앞으로 Context-API를 그냥 Context로 부르겠다.)
Context는 맥락이라는 뜻을 가지고 있다. React에서 사용하는 Context도 마찬가지이다.
React에서 Context를 사용하려면 우선 데이터를 공유할 범위를 정해야 한다.
그래서 <우리가 이름을 정한 Context의 이름.Provider> < /우리가 이름을 정한 Context의 이름.Provider>를 전역상태로 관리하는 데이터가 있는 최상위 컴포넌트가 렌더링 하는 요쇼들을 감싸주게 만들면 된다.
Context 만들기
그 다음 새로운 js파일에 위와 같이 createContext를 import해오고 우리가 원하는 Context이름을 가진 변수를 선언하고 거기에 createContext함수를 할당해주면 된다.
Context 적용하기
그 후 아까 말한것 과 같이 최상위 컴포넌트에서 렌더링 하는 요소들을 provieder를 통해 감싸주면 된다.
하위 컴포넌트로 전달해주고싶은 값은 Provider의 컴포넌트의 value속성값을 통해 전달해 줄 수 있다.
LocaleContext라는 Context에 "ko"라는 값이 담기게 된다고 생각하면 된다.
그리고 하위컴포넌트에 와서 useContext라는 hook을 통해 원하는 Context(LocaleContext)를 받아와 사용할 수 있다.
