React에서 체크박스 작업하기

체크박스 작업도 비슷한 원칙으로 수행되며, value 속성 대신 checked 속성을 지정합니다. 이 속성에 true를 전달하면 체크박스가 선택되고, false를 전달하면 선택되지 않습니다:

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> 선택됨
    <input type="checkbox" checked={false} /> 선택 안 됨
  </div>;
}

일반적으로 checked 속성에는 논리값을 포함하는 상태가 전달됩니다:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} />
  </div>;
}

입력 필드 작업과 마찬가지로, checked 속성 값을 하드코딩하면 체크박스 상태를 변경할 수 없습니다. 정상적으로 작동하려면 체크박스가 변경될 때 그 상태를 반대 값으로 변경해야 합니다:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  function handleChange() {
    setChecked(!checked); // 상태 반전
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={handleChange} />
  </div>;
}

다음과 같이 단순화할 수 있습니다:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
  </div>;
}

삼항 연산자를 사용하여 체크박스 상태를 단락에 출력해 보겠습니다:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>상태: {checked ? '선택됨' : '선택 안 됨'}</p>
  </div>;
}