3-1. Event 핸들링

Event의 종류

1. Clipboard
2. Composition
3. Keyboard
4. Focus
5. Form
6. Mouse
7. Selection
8. Touch
9. UI
10. Wheel
11. Media
12. Image
13. Animation
14. Transition

참조할만한 사이트
https://legacy.reactjs.org/docs/events.html
https://facebook.github.io/react/docs/events/html
두개는 서로 같은 사이트입니다.

Event를 사용할 때 주의사항<

1. 이벤트의 이름은 카멜 표기법으로 작성

예를 들어 HTML의 onclick은 리액트에서는 onClick으로 작성해야 합니다.
또 다른 예로 onkeyup은 onKeyUp으로 작성합니다.

2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수형태의 값을 전달합니다.

HTML에서 이벤트를 설정할 때는 큰 따옴표 안에 실행할 코드를 넣었지만,
리액트에서는 함수 형태의 객체를 전달합니다.
앞서 버튼 예제에서도 화살표 함수 문법으로 함수를 만들어 전달했듯이 바로 만들어서 전달해도 되고 렌더링 부분 외부에 미리 만들어서 전달해도 됩니다.

함수 형태의 객체를 전달한다는 것은?

=> 자바스크립트 코드를 직접 전달하는 방식

<button onclick="console.log('Button clicked!');">Click me</button>

=> 함수 형태의 객체 전달하는 방식

function handleClick() {
  console.log("Button clicked!");
  

}
// 렌더링 부분
<button onClick={handleClick}>Click me</button>

=> 화살표 함수를 사용하여 이벤트 핸들러를 전달하는 방식

<button onClick={() => console.log("Button clicked!")}>Click me</button>
// 얼핏보면 이것도 자바스크립트를 직접 전달하는 것처럼 보이지만
// {} 안에 화살표 함수를 만들어서 넣음

즉 자바스크립트 코드를 직접 전달하는 방식을 피하면됩니다.

=> 이는 리액트의 선언적 접근 방식을 유지하기 위함입니다.

3. DOM요소에만 이벤트를 설정할 수 있다.

div, button, input, form, span 등 DOM요소에는 이벤트를 설정할 수 있지만 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없습니다.

예를 들어 MyComponent.js에 onClick값을 설정한다면

<MyComponent onClick={doSomething}/>

MyComponent를 클릭할 때 doSomething 함수를 실행하는 것이 아니라,
그냥 이름이 onClick인 props를 Mycomponent에게 전달해 줄 뿐입니다.
따라서 컴포넌트에 자체적으로 이벤트를 설정할 수는 없습니다.
하지만 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정할 수는 잇습니다.

<div onClick={this.props.onClick}>
  ...
</div>