시작하기에 앞서 useContext를 사용하기 위해서는 React에서 쓰는 Context의 개념과 사용법을 알고 쓰면 좋다.
왜냐 useContext는 Context에 접근해 사용하는 훅이기 때문이다.

Context API

• React로 컴포넌트들을 구성하다보면 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달하게 된다.

• 하지만 props를 전달하는 것이 깊어지다보면 props는 여러 컴포넌트들을 지나 전달 되어야하는데 이는 불편함을 유발한다. (prop drilling)

• 이 때 Context를 사용하면 아래 그림과 같이 종착역(컴포넌트)에 바로 정보를 제공할 수 있다. (데이터를 전역적으로 관리해줄 수 있음)
  

예제

• 예제를 통해서 Context를 어떻게 사용하는지 알아보자
  

• name을 Sub3까지 내려보자
  

• 이제 context를 사용해 prop dirlling을 끝내보겠음
  

• props를 하위 컴포넌트들에게 내려줄 필요없이 useContext를 통해 한번에 내려줄 수 있다.

useContext 란?

다시 본론으로 돌아와서 useContext가 뭔지 짚어보자.

useContext는 지정된 Context를 추적하고 ContextProvider를 통해 값을 넘겨줄 수 있다.

• Context API에서 value는 최상위 컴포넌트의 영향을 받는 것이 아니라, 가장 가까운 Provider의 값을 사용한다.
• 같은 계층에 있는 Provider를 무시한다.

주의 사항

2번이 제일 중요한거같아서 적어봄

• Context의 값이 변경되면 해당 값을 사용하는 모든 자식 컴포넌트가 다시 렌더링된다.
  memo(useMemo)를 사용해 불필요한 렌더링을 줄일 순 있지만, Context가 변경됐을 때 새로운 값으로 바뀌는 것을 막지 못한다. 이는 성능 최적화에 중요한 요소이다.

Context를 이용한 코드

Github