input checkbox 에 onChange 대신 onClick 을 사용하신 이유

Question

안녕하세요 선생님 input checkbox 에 onClick 을 사용하면 react 에서는 경고도 날리기도 하는데 onChange 대신 onClick 을 사용하신 이유가 궁금합니다.

이정환 Winterlood · Answer

안녕하세요 이정환입니다. 좋은 질문입니다. 결론부터 말씀드리면 체크박스의 상태를 다룰 때는 일반적으로 React에서도 onChange 사용을 권장하고, 저도 업무를 처리할 때에는 대부분 onChange를 사용합니다. 다만 강의 예제에서는 “클릭했을 때 토글된다”는 동작을 직관적으로 보여주기 위해 onClick을 사용했습니다. 체크박스는 사용자가 실제로 클릭하는 순간 상태가 바뀌는 UI라서, 단순 토글 로직을 설명할 때 onClick이 더 직관적으로 느껴질 수 있을듯하여 사용했습니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 헤헤히히님, 질문 주셔서 감사합니다. 리액트에서 Checkbox의 변경을 감지할 때, onChange 대신 onClick 을 사용하는 경우에 경고 메시지가 뜨는 이유는 리액트의 권장사항 때문입니다. 일반적으로 체크박스의 상태가 변할 때는 onChange 이벤트를 사용하도록 권장하지만, 컴포넌트 설계나 특정 기능 구현 상의 이유로 onClick 을 선택할 수도 있습니다. 이러한 선택을 할 수 있는 몇 가지 이유는 다음과 같습니다: 특정 동작의 필요성 : Checkbox를 클릭할 때마다 즉각적인 UI 업데이트 또는 특정 기능을 수행할 필요가 있을 경우. onClick 은 클릭 자체를 감지하므로 이와 같은 처리가 필요할 때 사용될 수 있습니다. 브라우저 지원 및 호환성 : 과거에는 일부 브라우저에서 Checkbox의 onChange 이벤트가 예상대로 작동하지 않는 문제가 있었습니다. 이를 해결하기 위해 onClick 을 사용하던 시절이 있었으나, 대부분 현대적인 설정에서는 해당 사항이 거의 드뭅니다. 사용자의 입력을 더 구체적으로 확인할 때 : 특정 사용자 인터페이스 요구사항에서, 각 체크박스의 클릭을 더 구체적으로 다루는 일이 필요할 때가 있습니다. 관련 질문과 답변을 참고하시어 추가적인 힌트를 얻으실 수 있을 것입니다: input의 onClick 이벤트 Checkbox 관련 이 링크들에서는 Checkbox 및 입력 이벤트의 활용에 관해 더 깊이 있는 설명이 제공될 수 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.