이 글은 인프런 강의 소플의 처음 만난 리액트(React) 강의를 보고 정리했습니다.
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8

context 생성

• React.createContext( )

const MyContext = React.createContext(기본값);

함수의 파라미터로 기본값을 넣어주면 된다.

리액트에서 랜더링이 일어날때 context객체를 구독하는 하위 컴포넌트가 나오면 현재 context 값의 가장 가까이에 있는 상위 레벨의 provider로 부터 받아오게 된다.

만약 상위 레벨에 매칭되는 provider가 없다면 기본값이 사용된다.

그렇기때문에 기본값은 provider 없이 컴포넌트를 테스트할때 유리하다.

참고로 기본값으로 undefined를 넣으면 기본값이 사용되지 않는다.

context.provider

createContext를 사용해서 context를 만들었다면, 하위 컴포넌트들이 해당 context의 데이터를 받을 수 있도록 설정해줘야하는데 이때 등장한 것이 context.provider이다.

즉, 데이터를 제공해주는 컴포넌트이다. context.provider로 하위 context를 감싸주면 모든 context들이 해당 context에 데이터에 접근할 수 있게 해준다.

//provider 사용
<MyContext.Provider value={/*some value*/}

⇒ 하위 컴포넌트들은 위의 코드 값을 갖게 되는데 그 하위 컴포넌트들이 데이터를 소비한다는 뜻에서 consuming 컴포넌트라고 한다.

컨슈밍 컴포넌트는 컨텍스트 값의 변화를 지켜보다가 만약 값이 변경되면재렌더링 된다.

하나의 컴포넌트는 여러개의 컨슈밍 컴포넌트와 연결될 수 있고 중첩되어 사용도 가능하다.

벨류 값이 변경될때마다 재렌더링 된다.

provider value에서 주의해야할 사항

provider 컴포넌트가 재렌더링될 때마다 모든 하위 consumer 컴포넌트가 재렌더링 된다.

→ state를 사용하여 불필요한 재렌더링을 막음.

class.contextType

provider 하위에 있는 class 컴포넌트에서 context의 데이터에 접근하기위해 사용하는 것

Context.consumer

context 데이터를 구독하는 컴포넌트

<MyContext.Consumer>
			{value => /*컨텍스트의 값에 따라서 컴포넌트들을 렌더링*/}
</MyConetext.Consumer>

Context.displayName

⇒ 리액트 개발자도구에 표시된다.

여러 개의 Context 사용하기

context.provider을 중첩적으로 사용하기

⭐⭐⭐⭐⭐

useContext( ) Hook

: 함수 컴포넌트에서 context를 쉽게 사용하게 해준다

function MyComponent(props) {
	const value = useContext(MyContext);

	return (
			...
	)
}