React로 체크박스 상태에 따라 화면 출력하기

 

체크박스를 클릭하면 상태가 변경되고, 그 상태에 따라 화면에 "체크됨" 또는 "체크 안됨"을 출력하기

---

 

코드 설명

1. useState로 상태 선언

• checked라는 상태 변수와 이를 업데이트하는 setChecked 함수 생성

2. onChange 이벤트 핸들러

• 체크박스의 체크 상태를 감지하고 상태를 업데이트

3. 출력

• 체크 상태에 따라 조건부 렌더링으로 "체크됨" 또는 "체크 안 됨" 표시

---

 

사용예시

function CheckboxExample() {
  const [checked, setChecked] = useState(false);

  const handleChange = (e) => setChecked(e.target.checked);

  return (
    <div>
      <label>
        <input type="checkbox" checked={checked} onChange={handleChange} />
        체크박스
      </label>
      <p>체크 상태: {checked ? "체크됨" : "체크 안 됨"}</p>
    </div>
  );
}