Context
- 데이터를 필요로 하는 컴포넌트에 바로 전달할 수 있음
- 코드가 깔끔해지고 데이터를 한 곳에서 관리하기 때문에 디버깅에도 유리
Context 사용X 
- 실제 데이터를 필요로하는 컴포넌트의 깊이가 깊어질수록 복잡해짐
- 반복되는 코드를 계속 작성해줘야 하기 때문에 비효율, 비직관적
Context 사용O 
- 여러 컴포넌트에서 접근이 일어날 수 있는 데이터는 context를 사용하는 것이 좋음
Context를 사용하기 전에 고려할 점
컴포넌트와 Context가 연동되면 재사용성이 떨어짐
다른 레벨의 많은 컴포넌트가 데이터를 필요로 하는 경우에만 사용해야한다데이터의 변경 사항을 모두 하위 컴포넌트에 브로드캐스트
Context사용하지 않고 문제 해결
1. 컴포넌트를 변수에 저장해 직접 넘겨주기 
- Avatar컴포넌트를 변수에 저장한 뒤에 해당 변수를 하위 컴포넌트로 넘김
- 최상위 컴포넌트에 많은 권한 부여
- 데이터가 많아질수록 상위 컴포넌트는 복잡해지고 하위 컴포넌트는 너무 유연해짐
2. 하위 컴포넌트를 여러 개의 변수로 나눠서 전달 
- 하위 컴포넌트의 의존성을 상위 컴포넌트와 분리할 필요가 있는 대부분의 경우에 사용
Context API
React.createContext()
Context 생성
const MyContext = React.createContext(기본값);
- 현재 context의 값을 가장 가까이에 있는 provider로부터 받아옴
- 만약 상위 레벨에 매칭되는 provider가 없다면 기본값이 사용됨
- 기본값으로 Undefined를 넣으면 기본값 사용X
Provider
Provider 사용
<MyContext.Provider value={/* some value */ }>
- 데이터를 제공해주는 컴포넌트
- 모든 Context객체는 Provider를 갖고있음
- context.provider 컴포넌트로 하위 컴포넌트들을 감싸주면 모든 하위컴포넌트들이 해당 context의 데이터에 접근할 수 있게됨
- 여러 개의 provider 컴포넌트는 중첩사용 가능
- 하나의 provider컴포넌트는 여러 개의 컨슈밍 컴포넌트와 연결될 수 있음
Consumer 컴포넌트
- value를 사용하는 하위 컴포넌트
- context 값의 변화를 지켜보다가 값이 변경되면 재랜더링
- 프로바이더의 value prop이 바뀔때마다 재렌더링(상위 컴포넌트가 업데이트 대상이 아니더라도 하위에 있는 컴포넌트가 context를 사용한다면 하위 컴포넌트에서는 업데이트가 일어남)
Context.Consumer
<MyContext.Consumer>
{value => /*컨텍스트의 값에 따라서 컴포넌트들을 렌더링 */}
</MyContext.Consumer>- 컴포넌트에 자식으로 들어간 함수가 현재 Context의 value를 받아서 react node로 return
- 함수로 전달되는 value는 프로바이더의 value prop과 동일
- 상위 컴포넌트에 프로바이더가 없다면 value파라미터는 createContext를 호출할 때 넣는 기본값과 동일한 역할
function as a child
- 컴포넌트의 자식으로 함수를 사용하는 방법
여러 개의 Context사용
- 중첩해서 사용하면 됨
useContext() Hook
- 생성된 context를 인자로 받아서 현재 context의 값을 return
