[React] 리액트 이벤트 처리(이벤트 핸들링)

React에서의 이벤트 처리 방법

리액트에서 이벤트 핸들링을 하는 방법은 DOM에서 이벤트를 다루는것과 비슷하지만 방식은 완전히 같지 않다.

무언가 행동이 일어날때 실행시키고 싶은 함수를 전달하는 방식으로 이벤트를 처리한다.

이벤트 함수 : 무언가 변화가 일어날때 실행되는 함수

 

1. 이벤트 함수를 만들때, 함수 이름을 camel case로 작성해야 한다.

2. 이벤트 함수를 전달할때, 함수이름을 문자열처리 하지 않고 그대로 전달한다.

<button onClick={handleEvent}>button</button>

3. 이벤트 함수를 전달할때, 함수를 변수에 담아서 전달하거나 arrow function을 이용하여 함수를 정의해야한다.

함수를 그대로 쓰면, 함수의 실행이 아닌 함수의 호출 결과가 이벤트에 전달되기 때문이다.

// 함수 정의하기

return (
  <div>
	...
    <button onClick={() => alert(name)}>Button</button>
	...
  </div>
  );
};

// 함수 자체를 전달하기

const handleClick = () => {
  alert(name);
};

return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};

onChange

사용자가 무언가를 입력할때, 변화를 감지하고 입력값을 제어할 때 사용한다.

이벤트가 발생하면(무언가 입력이 생기면) event.target.value를 이용하여 변한 값을 받아온다.

onClick

사용자가 버튼등을 클릭할때, 이벤트 함수를 실행시킬때 사용한다.