React에서 컨텍스트 업데이트하기

이번 레슨에서는 컨텍스트 값이 변경될 때 컴포넌트를 업데이트하는 방법을 살펴보겠습니다. 컨텍스트가 변경되기를 원할 수 있다고 가정해 보겠습니다.

이 경우 컨텍스트를 상태와 함께 사용하는 것이 유용합니다. 지난 레슨에서 만들었던 박스 애플리케이션을 약간 수정하고 버튼을 클릭하면 전달되는 값이 'metal box :)'로 변경되도록 만들어 보겠습니다.

자, App 파일을 가져와서 BigBox 뒤에 버튼을 그려봅시다:

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

다음으로, useState 훅을 임포트하고 name 상태를 만들어서 버튼 클릭 시 값이 변경되도록 합니다. 초기값은 우리가 바로 컨텍스트 값으로 전달했던 값, 즉 'small box :)'로 설정합니다:

function App() {
	const [name, setName] = useState('small box :)');
}

이번에는 컨텍스트로 문자열 대신 name 상태를 전달하겠습니다:

<MyContext.Provider value={name}>
	<BigBox />
	<button>click</button>
</MyContext.Provider>

마지막 단계로, 버튼 클릭 핸들러를 호출하고 setName 함수를 사용하여 상태 값을 'metal box :)'로 설정합니다. 그 후 버튼을 클릭하여 결과를 확인할 수 있습니다:

<button onClick={() => {
	setName('metal box :)');
}}>click</button>

이전 레슨의 문제를 해결할 때 만든 애플리케이션을 사용하세요. age 상태를 만들고, 숫자 대신 컨텍스트를 통해 App에서 이 상태를 전달하세요. 초기값을 50로 설정하세요. App의 Parent 컴포넌트 아래에 버튼을 추가하고, 이 버튼을 클릭할 때마다 age 상태 값이 2씩 감소하도록 만드세요.