8. Context API

Context API란 React에서 제공하는 API로, props를 통해 전달하지 않고도 상위 컴포넌트가 가진 데이터에 접근할 수 있도록 고안된 방법

Context란 일반적으로 문맥이라는 의미로 사용되며, 특정 컴포넌트 그룹이 해당 그룹 안에서만 통용되는 일련의 문맥을 가지고 있다고 여겨지기 때문에 지어진 이름이라고 볼 수 있음

따라서 이러한 Context API는 최상위 컴포넌트에서만 사용할 수 있는 것이 아니라 동일한 문맥에 해당하는 특정 컴포넌트 그룹이 있다면 해당 그룹을 하나의 독립된 Context로 관리할 수 있음

1. Context 생성

Context는 React.js 최상위 API인 React에서 함수의 형태로 제공

const { createContext } = React;
 
const AContext = createContext(); // createContext(기본 값);

2. Context를 통해 데이터 제공

생성한 컨텍스트를 적용할 컴포넌트 그룹 중 최상위 컴포넌트에 적용

<MyContext.Provider value={data}>
	<A />
</MyContext.Provider>

3. Context가 제공하는 데이터 접근(사용)

useContext() hook을 사용하여 컨텍스트가 제공하는 데이터에 접근 및 사용 가능

const D = () => {
	const data = useContext(MyContext);
	
	return (
		<div>
			<h5>{data}</h5>
		</div>
	)
}