Javascript

onChange 이벤트에 함수 적용 하는 방법들

MDanderson 2023. 11. 27. 14:09

onChange={handleCrnChange}:

이 방식은 handleCrnChange 함수를 이벤트 핸들러로 직접 참조합니다.
이벤트가 발생할 때 React는 이 함수를 호출하고, 이벤트 객체를 자동으로 이 함수의 첫 번째 인자로 전달합니다.
이 방식은 이벤트 핸들러에 추가적인 인자가 필요하지 않을 때 일반적으로 사용됩니다


onChange={() => handleCrnChange()}:
이 방식은 새로운 함수를 생성하고, 이 함수 내에서 handleCrnChange를 호출합니다.
이벤트 객체는 자동으로 전달되지 않으며, 필요한 경우 명시적으로 전달해야 합니다. 예: onChange={(e) => handleCrnChange(e)}.
이 방식은 이벤트 핸들러에 추가적인 인자를 전달하거나, 특정 조건에 따라 핸들러를 호출해야 할 때 유용합니다.


onChange={handleCrnChange()}:
이 방식은 컴포넌트가 렌더링될 때 handleCrnChange 함수를 즉시 실행하고, 그 결과(함수가 반환하는 것)를 이벤트 핸들러로 설정합니다.
이 방식은 일반적으로 의도하지 않은 사용 방식입니다. 왜뜬하면 함수가 렌더링 시점에 실행되어버리기 때문입니다.
대부분의 경우, 이는 버그로 이어질 수 있으며, 이벤트 핸들링에 적합하지 않습니다.

 


일반적으로, 단순히 이벤트를 처리하고 추가적인 인자가 필요 없는 경우 onChange={handleCrnChange} 같은 첫 번째 방식을 사용하며, 추가적인 로직이나 인자가 필요한 경우 두 번째 방식 onChange={(e) => handleCrnChange(e)}를 사용합니다.