[React] (리액트 공부하기 21) Arguments 전달하기

React에서 이벤트 핸들러 함수에 특정 데이터를 전달해야 하는 경우가 종종 있다.
여기에서 설명된 예제는 버튼을 클릭할 때 특정 ID를 이벤트 핸들러에 전달하는 방법이다.

예제 코드 1: Arriw Function을 사용한 방식

<button onClick={(event) => this.deleteItem(id, event)}>삭제하기</button>

1. Arrow Function 사용

• 버튼이 클릭될 때, (event)라는 함수가 호출된다.
• this.deleteItem(id, event)라는 함수가 호출되며, 첫 번째 인자는 id, 두 번째 인자는 React의 이벤트 객체(event)이다.
• 여기서 이벤트 객체는 클릭된 DOM 요소에 대한 정보를 포함하고 있다.

2. 장점

• 간결하고 직관적으로 작성할 수 있다.
• 명시적으로 event를 추가하여 다음과 같이 id와 event를 원하는 순서로 전달할 수 있다.

예제 코드 2: bind() 메서드를 사용한 방식

<button onClick={(this.deleteItem.bind(this, id)}>삭제하기</button>

1. Function.prototype.bind() 사용

• bind()는 this와 함께 첫 번째 인자로 전달된 값(id)를 고정 시킨다.
• 이후 버튼이 클릭되면, deleteItem()이 호출되며, 전달된 id는 첫 번째 인자로, 이벤트 객체는 두 번째 인자로 전달된다.
• 즉, this.deleteItem(id, event)가 호출된다.

2. 특징

• bind를 사용하는 경우, React가 자동으로 이벤트 객체를 두 번째 인자로 전달한다.

2. 따라 첫 번째 인자로는 ID를, 두 번째 인자로는 이벤트 객체를 사용할 수 있다.

함수형 컴포넌트에서 이벤트 핸들러

function MyButton(props) {
  const handleDelete = (id, event) => {
    console.log(id, event.target);
  };
  
  return (
    <button onClick={(event) => handleDelete(1, event)}삭제하기</button>
  );
}

1. 핸들러 함수 설명

• handleDelete는 두 개의 매개변수를 받는다. id와 event.
• 첫 번째 인자는 특정 데이터를 나타낸다. 예를 들어 삭제할 항목의 id이다.
• 두 번째 인자는 React에서 전달하는 클릭 이벤트 객체이다.

2. 실행 흐름

• 버튼을 클릭하면, handleDelete가 호출된다.
• 1은 id로, 클릭된 버튼에 대한 정보는 event로 전달 된다.

3. 콘솔 출력