[React] onChange & onInput

김광일·2024년 2월 26일
0

react

목록 보기
12/16
post-thumbnail

onChange와 onInput 속성은 JS에서는 기능이 다르지만, React는 동일하다.


JS ? -> onChange와 onInput이 다른 기능을 함
React ? -> onChange와 onInput이 같은 기능을 함


JS에서의 onChange와 onInput의 차이점

  1. onChange:
    onChange 이벤트는 입력 요소의 값이 변경되었을 때 발생합니다.
    대부분의 경우, 사용자가 입력을 완료하고 해당 입력 필드를 떠날 때 이벤트가 발생합니다. 예를 들어, 텍스트 입력 필드에서 텍스트를 입력하고 포커스를 잃을 때(blur 이벤트가 발생할 때) onChange 이벤트가 발생합니다.
    보통 텍스트 입력 필드나 선택 요소(셀렉트박스, 라디오 버튼, 체크박스 등)에서 사용됩니다.

  2. onInput:
    onInput 이벤트는 입력 요소에 사용자 입력이 발생할 때 매번 발생합니다.
    사용자가 키보드로 입력할 때마다 이벤트가 발생하므로, 실시간으로 입력을 감지할 때 유용합니다.
    따라서 입력이 발생할 때마다 즉각적인 처리가 필요한 경우에 사용됩니다.


요약하면,
onChange는 값이 변경될 때 발생하고, 보통 입력이 완료된 후에 발생하며,
onInput은 사용자가 입력을 할 때마다 발생하고, 실시간으로 입력을 처리할 때 유용하다.


그러나 React에서는 동일하다.

profile
안녕하세요, 사용자들의 문제 해결을 중심으로 하는 프론트엔드 개발자입니다. 티스토리로 전환했어요 : https://pangil-log.tistory.com

0개의 댓글