처음 만난 리액트 문서
8.2 Arguments 전달하기
지금까지 이벤트 핸들러를 어떻게 사용하는지 배웠습니다. 이제 이벤트 핸들러에 Arguments를 전달하는 방법에 대해서 배워보도록 하겠습니다. 먼저 영어 단어 Argument는 주장, 논쟁, 말다툼이라는 뜻을 갖고 있습니다. 여기에서는 주장이라는 뜻에 더 가까운데, 함수에 주장할 내용 이라고 이해하면 됩니다. 다시 말해서, 함수에 전달할 데이터 를 Arguments라고 하며, 같은 의미로 파라미터(Parameter)라는 용어도 많이 사용합니다. 그리고 우리말로는 매개변수라고 부릅니다.
이벤트 핸들러에 매개변수를 전달해야 하는 경우는 굉장히 많습니다. 예를 들어, 특정 사용자 프로필을 클릭했을 때 해당 사용자의 아이디를 매개변수로 전달해서 정해진 작업을 처리해야 하는 경우를 들 수 있습니다. 어떤식으로 매개변수를 이벤트 핸들러에 전달하는지 먼저 아래 클래스 컴포넌트의 예제 코드를 한 번 보도록 하겠습니다.
<button onClick={(event) => this.deleteItem(id, event)}>삭제하기</button>
<button onClick={this.deleteItem.bind(this, id)}>삭제하기</button>
위 두 줄의 코드는 모두 동일한 역할을 하지만, 하나는 arrow function을 사용했고 다른 하나는 Function.prototype.bind를 사용했습니다. 여기에서 나오는 event라는 매개변수는 리액트의 이벤트 객체를 의미합니다. 여기서 두 가지 경우 모두 첫 번째 매개변수는 id이고, 두 번째 매개변수로는 event가 전달됩니다.
첫 번째 arrow function을 사용한 방법에서는 명시적으로 event를 두 번째 매개변수로 넣어주었고, 두 번째 Function.prototype.bind를 사용한 방법에서는 event가 자동으로 id이후의 두 번째 매개변수로 전달됩니다.
이렇게 사용하는 방식은 클래스 컴포넌트에서 사용하는 방식이므로 지금은 거의 사용하지 않습니다. 함수 컴포넌트에서는 이벤트 핸들러에 매개변수를 전달할 때 아래와 같이 하면 됩니다. 참고로 여기서 매개변수의 순서는 원하는대로 변경해도 상관없습니다.
function MyButton(props) {
const handleDelete = (id, event) => {
console.log(id, event.target);
};
return (
<button onClick={(event) => handleDelete(1, event)}>삭제하기</button>
);
}
마지막 업데이트: 2025년 08월 27일 05시 33분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page