체크박스 인풋 다룰 때 주의 사항 5가지
이벤트 핸들링: change와 click 이벤트를 적절히 사용하여 체크박스의 상태 변경을 감지하고, 상태를 업데이트해야 합니다. 일반적으로 change 이벤트가 체크박스 상태 관리에 더 적합합니다.
접근성(Accessibility): 모든 사용자가 체크박스를 쉽게 사용할 수 있도록, 키보드 및 스크린 리더 접근성을 고려해야 합니다. 예를 들어, label을 사용하여 체크박스와 연관된 텍스트를 명확히 해야 합니다.
폼 제출 동작: 폼(form 태그) 내에서 체크박스를 사용할 경우, 체크박스가 체크되었을 때와 체크되지 않았을 때의 폼 제출 값(value)을 처리해야 합니다. 체크박스의 value 속성과 폼 제출 시 서버로 전송되는 데이터를 관리해야 합니다.
초기 상태 관리: SPA일 경우 체크박스의 초기 체크 상태를 관리하기 위해 상태나 props를 사용해야 합니다. 컴포넌트가 마운트될 때 체크박스의 초기 상태를 설정하고, 필요에 따라 상태를 업데이트해야 합니다.
다중 체크박스 관리: 다중 체크박스를 사용하는 경우, 각 체크박스의 선택 여부를 배열이나 객체 등의 구조로 관리해야 합니다. 이를 통해 복잡한 폼에서도 체크박스 그룹의 상태를 효율적으로 관리할 수 있습니다.
크게 다섯 가지 주의 사항이 있었는데요, 그 중 첫 번째인 이벤트 핸들링에 초점을 맞춰 이야기 해 보겠습니다.
이벤트 핸들링에 왜 주의해야 할까?
change 이벤트와 click 이벤트의 차이
change 이벤트: 체크박스의 상태가 변경될 때마다 발생합니다. 이는 체크박스의 체크 상태(체크됨/해제됨)가 변경될 때 이벤트가 발생하며, 폼 요소의 상태 관리에 가장 적합한 이벤트입니다.
click 이벤트: 체크박스를 클릭할 때 발생합니다. 사용자가 체크박스를 클릭하는 모든 경우에 이벤트가 발생하며, 클릭 자체에 반응하는 UI 동작 구현에 유용합니다.
리액트에서 사용할 때 주의할 점
리액트는 선언적 UI 패러다임을 활용하는 것이 권장되고, 사용자 입력에 따른 상태를 JS단에서 관리하게 되는 경우가 많습니다. 이런 환경에서 체크박스와 같은 폼 요소를 다룰 때 onClick 이벤트를 사용하는 것은 의도하지 않은 문제를 일으킬 수 있습니다. 대신 onChange 이벤트를 사용하여 컴포넌트의 상태를 업데이트하는 것이 권장됩니다.
예시 코드 -onClick
import React, { useState } from 'react';
function CheckboxWithOnClick() {
const [isChecked, setIsChecked] = useState(false);
const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {
if (someCondition) {
event.preventDefault();
}
setIsChecked(!isChecked);
};
return (
<div>
<input
type="checkbox"
checked={isChecked}
onClick={handleClick}
/>
<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 handleChange = (event) => {
setIsChecked(event.target.checked);
};
return (
<div>
<input
type="checkbox"
checked={isChecked}
onChange={handleChange}
/>
<label>{isChecked ? 'Checked' : 'Not checked'}</label>
</div>
);
}
이 예시에서는 onChange 이벤트를 사용하여 체크박스의 상태를 관리하고 있습니다. 사용자가 체크박스를 클릭하여 상태를 변경할 때마다, handleChange 함수가 호출되어 isChecked 상태가 업데이트됩니다. 만약 키보드나 다른 수단으로 값이 업데이트 되더라도 change이벤트는 호출되므로 상태변화에 따른 값의 변화도 보장이 됩니다.
