React의 useContext 훅

이번 강의에서는 컨텍스트 작업을 계속하겠습니다. 이제 컴포넌트 트리를 구축해 보겠습니다. 먼저 별도의 파일에 React 컴포넌트 BigBox를 생성하세요:

function BigBox() {
	return (
		<p>bigbox</p>
	);
}

이 컴포넌트를 가져와서 메인 컴포넌트 App에 배치하세요:

import BigBox from './BigBox';

function App() {
	return (
		<BigBox />
	);
}

더 명확하게 보이도록 div를 약간 스타일링해 보겠습니다. 이를 위해 파일 styles.css를 생성하세요:

div {
	border: 1px solid blue;
	margin: 10px;
	text-align: center;
	max-width: 300px;
}

이 파일을 App.js에서 가져오는 것을 잊지 마세요:

import './styles.css';

이제 별도의 파일에 컴포넌트 MiddleBox를 생성하세요:

function MiddleBox() {
	return (
		<p>middlebox</p>
	);
}

그리고 이 컴포넌트를 큰 상자 BigBox 안에 넣으세요:

import MiddleBox from './MiddleBox';

function BigBox() {
	return (
		<div>
			<MiddleBox />
		</div>
	);
}

작은 상자 SmallBox에 대해서도 모두 동일하게 수행하세요:

function SmallBox() {
	return (
		<p>나는 ... 입니다</p>
	);
}

이러한 작은 상자 두 개를 MiddleBox에 배치하세요:

import SmallBox from './SmallBox';

function MiddleBox() {
	return (
		<div>
			<SmallBox />
			<SmallBox />
		</div>
	);
}

트리를 구축했습니다. 이제 우리는 App에서 SmallBox로 문자열 값 'small box :)'를 전달하고 싶지만, props를 사용하지 않고 컨텍스트를 활용하겠습니다(우리의 상자 애플리케이션이 엄청나게 커질 수도 있으니까요).

컨텍스트 파일 MyContext.js는 이미 생성했고 이전 강의에서 연결했습니다.

다음 단계는 BigBox를 컨텍스트 객체 MyContext의 속성인 컨텍스트 프로바이더로 감싸는 것입니다. 이제 이 구조에 포함된 모든 컴포넌트(BigBox에 중첩된 모든 상자 포함)는 컨텍스트에 액세스하고 변경 사항을 구독할 수 있게 됩니다. 컨텍스트 값으로 원하는 값 'small box :)'를 전달합니다:

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
		</MyContext.Provider>
	);
}

이제 남은 것은 컨텍스트 값을 읽는 것입니다. 우리는 이 값을 SmallBox에서 사용하고 싶었으므로 컨텍스트 파일 MyContext.js와 useContext 훅을 가져오세요:

import { useContext } from 'react';
import { MyContext } from './MyContext.js';

useContext를 사용하여 컨텍스트 값을 name 변수로 읽어보세요:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>나는 ... 입니다</p>
		</div>
	);
}

우리는 SmallBox를 이 컨텍스트에 구독했으며, 컨텍스트가 변경되면 이 컴포넌트도 업데이트됩니다.

마지막으로, 변수 name의 값을 줄임표 대신에 넣으세요:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>나는 {name} 입니다</p>
		</div>
	);
}

빈 컴포넌트 App에서 컴포넌트 Parent를 생성하고, 그 안에 컴포넌트 Daughter를, 그리고 Daughter 안에 컴포넌트 Grandson를 만드세요. 컨텍스트를 사용하여 App에서 42의 나이 값을 전달하고, useContext를 사용하여 이 값을 컴포넌트 Daughter에 출력하세요.

이제 컴포넌트 Grandson에서 나이 값을 출력하되, 2로 나눈 값을 출력하세요.