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