테드풀의 한 입 지식🍮

체크박스 인풋 태그 활용 주의 사항 정리

Photo by Thomas Bormans on Unsplash

체크박스 인풋 태그 활용 주의 사항 정리

체크박스 인풋을 다룰 때 주의할만한 점을 정리해봤습니다.

Ted Lee's photo
Ted Lee
·

3 min read

체크박스 인풋 다룰 때 주의 사항 5가지

  1. 이벤트 핸들링: change와 click 이벤트를 적절히 사용하여 체크박스의 상태 변경을 감지하고, 상태를 업데이트해야 합니다. 일반적으로 change 이벤트가 체크박스 상태 관리에 더 적합합니다.

  2. 접근성(Accessibility): 모든 사용자가 체크박스를 쉽게 사용할 수 있도록, 키보드 및 스크린 리더 접근성을 고려해야 합니다. 예를 들어, label을 사용하여 체크박스와 연관된 텍스트를 명확히 해야 합니다.

  3. 폼 제출 동작: 폼(form 태그) 내에서 체크박스를 사용할 경우, 체크박스가 체크되었을 때와 체크되지 않았을 때의 폼 제출 값을 처리해야 합니다. 체크박스의 value 속성과 폼 제출 시 서버로 전송되는 데이터를 관리해야 합니다.

  4. 초기 상태 관리: SPA일 경우 체크박스의 초기 체크 상태를 관리하기 위해 컴포넌트의 상태나 props를 사용해야 합니다. 컴포넌트가 마운트될 때 체크박스의 초기 상태를 설정하고, 필요에 따라 상태를 업데이트해야 합니다.

  5. 다중 체크박스 관리: 다중 체크박스를 사용하는 경우, 각 체크박스의 선택 여부를 배열이나 객체 등의 구조로 관리해야 합니다. 이를 통해 복잡한 폼에서도 체크박스 그룹의 상태를 효율적으로 관리할 수 있습니다.

크게 다섯 가지 주의 사항이 있었는데요, 그 중 첫 번째인 이벤트 핸들링에 초점을 맞춰 이야기 해 보겠습니다.

이벤트 핸들링에 왜 주의해야 할까?

change 이벤트와 click 이벤트의 차이

  • change 이벤트: 체크박스의 상태가 변경될 때마다 발생합니다. 이는 체크박스의 체크 상태(체크됨/해제됨)가 변경될 때 이벤트가 발생하며, 폼 요소의 상태 관리에 가장 적합한 이벤트입니다.

  • click 이벤트: 체크박스를 클릭할 때 발생합니다. 사용자가 체크박스를 클릭하는 모든 경우에 이벤트가 발생하며, 클릭 자체에 반응하는 UI 동작 구현에 유용합니다.

리액트에서 사용할 때 주의할 점

리액트는 선언적 UI 패러다임을 활용하는 것이 권장되고, 사용자 입력에 따른 상태를 JS단에서 관리하게 되는 경우가 많습니다. 이런 환경에서 체크박스와 같은 폼 요소를 다룰 때 onClick 이벤트를 사용하는 것은 의도하지 않은 문제를 일으킬 수 있습니다. 대신 onChange 이벤트를 사용하여 컴포넌트의 상태를 업데이트하는 것이 권장됩니다.

예시 코드 -onClick

import React, { useState } from 'react';

function CheckboxWithOnClick() {
  const [isChecked, setIsChecked] = useState(false);

  const clickHandler = (event) => {
    // 사용자가 체크박스를 클릭했을 때의 조건을 검사하지만,
    // 조건에 따라 이벤트를 취소하려고 해도, 이미 클릭은 발생했기 때문에
    // UI와 실제 상태 사이에 불일치가 발생할 수 있음.
    if (someCondition) { // ⚠ someCondition은 sudo 코드
      event.preventDefault(); // 이 코드는 체크박스 상태 변경을 막지 못함.
      // 추가 로직...
    }
    setIsChecked(!isChecked); // 이 로직은 조건과 상관없이 실행됨.
  };

  return (
    <div>
      <input
        type="checkbox"
        checked={isChecked}
        onClick={clickHandler}
      />
      <label>{isChecked ? 'Checked' : 'Not checked'}</label>
    </div>
  );
}

이 예시에서, 만약 someCondition이 true일 때 체크박스의 상태 변경을 막으려고 한다면, onClick 이벤트 핸들러에서 event.preventDefault()를 호출해도 체크박스의 상태는 이미 변경된 후야. 이는 onClick이 DOM 요소에서 발생하는 실제 클릭 이벤트에 반응하기 때문에 생기는 문제로, preventDefault는 폼 제출 같은 기본 동작을 막는 데는 효과적이지만, 체크박스의 체크 상태 같은 것을 제어하는 데는 적합하지 않습니다.

예시 코드 - onChange

import React, { useState } from 'react';

function CheckboxComponent() {
    const [isChecked, setIsChecked] = useState(false);

    const changeHandler = (event) => {
        setIsChecked(event.target.checked);
    };

    return (
        <div>
            <input
                type="checkbox"
                checked={isChecked}
                onChange={changeHandler}
            />
            <label>{isChecked ? 'Checked' : 'Not checked'}</label>
        </div>
    );
}

이 예시에서는 onChange 이벤트를 사용하여 체크박스의 상태를 관리하고 있습니다. 사용자가 체크박스를 클릭하여 상태를 변경할 때마다, changeHandler 함수가 호출되어 isChecked 상태가 업데이트됩니다.

마무리

체크박스를 포함한 폼 요소의 상태 관리에는 change 이벤트의 사용이 더 적합합니다.
특히 리액트에서는 이벤트를 통해 사용자 입력에 따른 상태 변화를 선언적으로 관리하는게 권장되기 때문에, 정확하고 예측 가능한 상태 관리를 위해 onChange 이벤트를 우선적으로 고려하는 것이 좋습니다.

checkbox-input