React에서 체크박스 값 설정

1. React에서 값 제어 입력이 있는 체크박스
2. React에서 체크박스 값 설정하기

모든 웹 애플리케이션에는 사용자가 텍스트를 입력하거나 선택 항목을 선택하거나 확인란을 선택할 수 있는 입력 요소가 필요합니다. 이 기사에서는 입력 요소, 특히 React의 체크박스를 처리하는 방법에 대해 설명합니다.

React에서 값 제어 입력이 있는 체크박스

React에서 checked 값으로 제어된 체크박스 구현에 대해 논의하기 전에 제어된 입력에 대해 이야기해 봅시다.

React에는 제어되는 구성 요소와 제어되지 않는 구성 요소가 있습니다. 입력은 이 두 가지 유형 중 하나일 수 있습니다.

구성 요소(또는 입력 요소)는 상태에서 값을 가져올 때 제어되며 사용자의 작업이 상태를 업데이트합니다.

다음은 사용자가 입력 필드의 값을 변경할 때 발생하는 상황입니다.

1. 상태 값에서 필드 값을 설정합니다.
2. 필드에 새 문자를 입력하면 onChange 이벤트가 트리거됩니다.
3. 변경 사항을 반영하도록 상태를 업데이트하도록 핸들러를 설정합니다.
4. 입력 필드에 새로운 상태 값이 표시됩니다.

즉, 입력 요소와 상태 사이에 양방향 바인딩이 있습니다. 입력 요소의 변경 사항은 상태를 업데이트하고 요소는 상태에서 값을 가져옵니다.

React에서 체크박스 값 설정하기

일반적으로 상태에서 값을 가져오도록 입력 요소의 value 속성을 설정할 수 있습니다. 체크박스에는 checked 속성을 사용합니다.

부울 값과 동일한 checked 속성을 설정할 수 있습니다. 따라서 상태 값은 문자열, 정수 또는 기타 유형이 아닌 true 또는 false여야 합니다.

이 예를 살펴보겠습니다.

export default function App() {
  const [condition, setCondition] = useState(true);
  return (
    <div className="App">
      Interested?
      <input
        type="checkbox"
        checked={condition}
        onChange={() => setCondition(!condition)}
      />
    </div>
  );
}

CodeSandbox에서 라이브 데모를 확인하세요.

이 예에서는 체크박스의 checked 속성을 condition 상태 변수로 설정합니다. useState() 후크를 사용하여 이 상태 변수의 값을 초기화했습니다.

상태 변수를 초기화할 때 useState()에 제공되는 인수는 상태 변수의 초기 값이 됩니다. 이 경우 condition 변수는 true로 초기화됩니다.

다음으로 사용자의 가장 최근 입력을 반영하도록 상태를 업데이트합니다. 이를 위해 구성 요소가 변경될 때마다 상태 변수를 업데이트하도록 onChange 특성을 설정합니다.

이 경우에는 조건 상태 변수를 현재 값의 반대로 설정합니다. 현재 true인 경우 확인란을 변경(선택 취소)하면 false로 설정되고 현재 false(선택 해제)인 경우 true로 설정됩니다.