React에서 상태 끌어올리기

여러 컴포넌트가 동일한 변경 가능한 데이터를 반영해야 하는 경우가 많습니다. React에서는 공유 상태를 가장 가까운 공통 조상으로 끌어올리는 것을 권장합니다. 예제를 통해 살펴보겠습니다.

물의 온도 계산기를 만들고자 한다고 가정해 봅시다. 이는 사용자가 온도를 입력할 수 있는 입력 필드와, 물이 액체인지, 고체인지, 기체인지에 대한 판정을 출력할 단락으로 구성될 것입니다.

우리의 계산기가 Calculator 컨테이너 컴포넌트라고 가정해 봅시다:

function Calculator() {
	return <div>
		
	</div>;
}

온도 입력 필드를 TempInp 컴포넌트로, 판정을 보여주는 단락을 Verdict 컴포넌트로 분리해 봅시다:

function Calculator() {
	return <div>
		<Verdict />
		<TempInp />
	</div>;
}

TempInp와 Verdict 모두 온도에 대한 상태를 가져야 한다는 것을 쉽게 알 수 있습니다. 또한 이는 동일한 온도여야 합니다: 입력 필드에 데이터를 입력함에 따라 판정이 표시되어야 하기 때문입니다.

이런 경우 상태 끌어올리기라는 기법을 사용하는 것이 권장됩니다: 두 개(이상)의 컴포넌트가 공유하는 상태는 그들의 가장 가까운 공통 부모로 끌어올려집니다.

이 예제에서는 온도 상태가 Calculator 컴포넌트에 속하게 되며, 이 컴포넌트가 해당 상태를 props로 TempInp와 Verdict에 전달하게 됩니다:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} />
	</div>;
}

TempInp 컴포넌트에는 온도를 변경할 수 있는 입력 필드가 있어야 합니다. 하지만 이 온도가 해당 컴포넌트의 props이므로, TempInp 내에서 직접 변경해서는 안 됩니다. 올바른 방법은 Calculator 컴포넌트에서 온도를 변경하기 위한 특별한 함수를 전달하는 것입니다:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	function changeTemp(event) {
		setTemp(event.target.value);
	}
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} changeTemp={changeTemp} />
	</div>;
}

참고로 새로운 함수를 도입하지 않고, setTemp 함수를 자식 컴포넌트에 직접 전달할 수도 있습니다:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} setTemp={setTemp} />
	</div>;
}

TempInp와 Verdict 컴포넌트의 구현을 작성해 보세요.

상태 끌어올리기를 사용해야 하는 3개의 문제를 생각해 보세요. 그리고 그 문제들의 해법을 작성해 보세요.