[react] onChange 와 onClick

React Calendar library 쓰다가 onChange event handler 가 자동으로 props 를 전달한다는 것을 알게 되어서 onClick 도 자동으로 넘기나요? 물어보니까 그렇다고 함. @_@

출처 : ChatGPT

In React, both onChange and onClick event handlers automatically receive event objects as their first arguments, but they behave differently in terms of passing additional arguments.

 

둘의 차이는 뭘까?

 

onChange:

입력 필드나 선택 요소와 같은 폼 엘리먼트에 onChange를 사용하면 React는 자동으로 이벤트 핸들러에 첫 번째 인수로 변경 이벤트를 나타내는 이벤트 객체를 전달합니다. event.target.value를 사용하여 양식 요소의 값에 접근할 수 있습니다.

When you use 'onChange' with form elements like input fields or select elements, React automatically passes an event object representing the change event as the first argument to the event handler. You can access the value of the form element using 'event.target.value'.

react-calendar의 Calendar 컴포넌트와 같은 다른 컴포넌트의 경우, onChange 이벤트 핸들러는 일반적으로 이벤트 객체뿐만 아니라 선택한 날짜와 같은 컴포넌트와 관련된 특정 데이터를 추가 인수로 받습니다.

onClick:

onClick을 사용하면 React는 클릭 이벤트를 나타내는 이벤트 객체를 첫 번째 인수로 이벤트 핸들러에 자동으로 전달합니다. 이 이벤트 객체를 사용하여 대상 엘리먼트와 같은 클릭 이벤트에 대한 정보에 접근할 수 있습니다.

When you use 'onClick', React automatically passes an event object representing the click event as the first argument to the event handler. You can access information about the click event using this event object, such as the target element.

그러나 onClick은 일반적으로 특정 컴포넌트에 대해 onChange처럼 추가 인수를 제공하지 않습니다. onClick 이벤트 핸들러에 추가 인수를 전달하려면 클로저를 사용하거나 함수에 필요한 인수를 바인딩하여 명시적으로 전달해야 합니다.

 

 

예시

import React from 'react';

const MyComponent = () => {
  const handleChange = (event) => { console.log('Input value:', event.target.value); };
  const handleClick = (arg) => { console.log('Clicked with argument:', arg); };

return (
  <div>
    <input type="text" onChange={handleChange} />
    <button onClick={() => handleClick('additionalArgument')}>Click me</button>
    </div> );
};
export default MyComponent;

 

 

설명
- handleChange receives the event object automatically from onChange.
- handleClick is called with the argument 'additionalArgument' when the button is clicked,
  but this argument needs to be explicitly provided when invoking the function.