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

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

jsxfunction 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>;
}

Задание 1

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

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

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

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

Задание 2

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