React에서 체크박스와 조건부 렌더링

체크박스의 체크 여부에 따라 화면에 다른 코드 조각을 출력해 보겠습니다. 조건부 렌더링을 활용하겠습니다:

function App() {
	const [checked, setChecked] = useState(true);
	
	let message;
	if (checked) {
		message = <p>메시지 1</p>;
	} else {
		message = <p>메시지 2</p>;
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<div>{message}</div>
	</div>;
}

체크박스가 주어져 있습니다. 체크박스를 사용하여 사용자에게 18세 이상인지 물어보세요. 체크박스가 체크되어 있으면, 사용자에게 다음 코드 블록을 보여주세요:

<div>
	<h2>축하합니다, 벌써 18세 이상이시군요</h2>
	<p>
		여기는 성인 전용 콘텐츠가 위치합니다
	</p>
</div>

체크박스가 체크되어 있지 않다면 - 다음 블록을 보여주세요:

<div>
	<p>
		아쉽지만, 아직 18세가 아니시네요:(
	</p>
</div>

체크박스와 문단이 주어져 있습니다. 체크박스가 체크되어 있으면, 문단이 화면에 보이도록 하고, 체크되어 있지 않으면 문단을 숨기세요.