React의 상태 반응성

이제 반응성이 어떻게 작동하는지 살펴봅시다. 반응성은 상태가 변경될 때 변경 사항이 즉시 화면에 반영되도록 합니다.

예제를 통해 살펴보겠습니다. 제품 이름을 가진 상태가 있다고 가정해 봅시다:

const [name, setName] = useState('prod');

렌더링에 제품 이름을 출력해 봅시다:

return <div>
	<span>{name}</span>
</div>;

이제 상태를 변경할 수 있는 버튼을 만들어 봅시다:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

클릭 핸들러에서 setName 함수를 사용하여 제품의 새 이름을 설정합니다:

function clickHandler() {
	setName('xxxx');
}

전체 코드를 모아보겠습니다. 버튼을 클릭하면 텍스트가 새 값으로 즉시 변경됩니다:

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

별도의 핸들러 함수를 사용할 필요는 없습니다. 익명 화살표 함수를 사용할 수도 있습니다:

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

사용자의 이름과 성을 가진 상태가 주어져 있습니다. 이를 렌더링에 출력하세요. 이러한 상태를 변경하기 위한 버튼을 만드세요.