<그냥하자> 처음만난 리액트 (6) 이벤트 핸들링

출처 : 소플의 처음 만난 리액트

이벤트 처리하기

DOM에서 클릭 이벤트를 처리하는 방법

<button onclick="activate()">
	Activate
</button>

리액트에서의 이벤트 처리

<button onClick={activate}>
	Activate
</button>

이벤트의 이름인 onclick이 onClick으로 카멜 표기법을 적용한다.

어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수를 이벤트 핸들러(Event Handler)라고 부른다. 이벤트가 발생하는 것을 계속 듣고 있는다는 의미로 이벤트리스너(Event Listener)라고 부르기도 한다.

함수 컴포넌트 내부에서 이벤트 핸들러를 정의하는 방법은 함수 안에 또 다른 함수로 정의하는 방법과, arrow function을 사용하여 정의하는 방법이 있다.

Arguments 전달하기

Arguments 주장, 논쟁, 말다툼 즉 리액트에서는 함수에 주장할 내용이라고 이해하자. 다시 말해 함수에 전달할 데이터이다. 우리말로는 매개변수라고 부른다.

사용예시

function MyButton(props) {
  const handleDelete = (id, event) => {
    console.log(id, event.target);
  };

  return(
    <button onClick={(event) => handleDelete(1,event)}>삭제하기</button>
  )
}