1. HTML의 Event

이벤트(event) : 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것
- e.g. 버튼에 마우스 커서를 올렸을 때는 onmouseover이벤트를 실행
- e.g. 클릭했을 때는 onclick이벤트를 실행
- e.g. Form요소는 값이 바뀔 때 onchange이벤트를 실행

1<!doctype html>
2<html>
3  <head>
4    <title>Event 예제</title>
5  </head>
6  <body>
7    <button onclick="alert('눌렀네?')">눌러보세용</button>
8  </body>
9</html>

2. React의 Event

리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷합니다.

2.1 이벤트는 카멜 표기법으로 작성

예를 들어, HTML은 다음과 작성

1<button onclick="activateLasers()">Activate Lasers</button>

React에서는 이벤트를 카멜표기법으로 작성 (HTML의 onclick은 리액트에서는 onClick)

1<button onClick={activateLasers}>Activate Lasers</button>

2.2 preventDefault를 명시적으로 호출

React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 꼭 호출해야 합니다.

예를 들어, 일반 HTML에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 다음과 같은 코드를 작성할 수 있습니다.

1<form onsubmit="console.log('You clicked submit.'); return false">
2  <button type="submit">Submit</button>
3</form>

React에서는 다음과 같이 작성할 수 있습니다.

1function Form() {
2  // 여기서 e는 합성 이벤트
3  function handleSubmit(e) {
4    e.preventDefault()
5    console.log('You clicked submit.')
6  }
7
8  return (
9    <form onSubmit={handleSubmit}>
10      <button type="submit">Submit</button>
11    </form>
12  )
13}

여기서 e는 합성 이벤트입니다. React는 W3C 명세에 따라 합성 이벤트를 정의하기 때문에 브라우저 호환성에 대해 걱정할 필요가 없습니다. React 이벤트는 브라우저 고유 이벤트와 정확히 동일하게 동작하지는 않습니다. 더 자세한 사항은 합성 이벤트을 참고하시기 바랍니다.

React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없습니다. 대신, 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 됩니다.

ES6 클래스를 사용하여 컴포넌트를 정의할 때, 일반적인 패턴은 이벤트 핸들러를 클래스의 메서드로 만드는 것입니다. 예를 들어, 다음 Toggle 컴포넌트는 사용자가 “ON”과 “OFF” 상태를 토글 할 수 있는 버튼을 렌더링합니다.

1class Toggle extends React.Component {
2  constructor(props) {
3    super(props)
4    this.state = { isToggleOn: true }
5
6    // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 함
7    this.handleClick = this.handleClick.bind(this)
8  }
9
10  handleClick() {
11    this.setState(prevState => ({
12      isToggleOn: !prevState.isToggleOn,
13    }))
14  }
15
16  render() {
17    return <button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
18  }
19}
20
21const root = ReactDOM.createRoot(document.getElementById('root'))
22root.render(<Toggle />)

JSX 콜백 안에서 this의 의미에 대해 주의해야 합니다. JavaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않습니다. this.handleClick을 바인딩하지 않고 onClick에 전달하였다면, 함수가 실제 호출될 때 this는 undefined가 됩니다.

이건 JS에서 함수가 동작하는 방식으로 onClick={this.handleClick}과 같이 뒤에 ()를 사용하지 않고 메서드를 참조할 경우, 해당 메서드를 바인딩 해야 합니다.

2.3 주의사항 정리

이벤트는 카멜 표기법으로 작성
- HTML의 onclick은 리액트에서는 onClick
React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다.
- 반드시 preventDefault를 명시적으로 호출해야 합
이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달
- HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달
- 위 버튼 예제에도 화살표 함수로 함수를 만들어 전달
- 이렇게 함수를 만들어 전달해도 되고, 렌더링 부분 외부에 미리 만들어서 전달해도 됨
DOM 요소에만 이벤트를 설정 가능
- div, button, input, form, span등의 DOM 요소에는 이벤트를 설정할 수 있지만,
- 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음

예를 들어 다음처럼 직접 만든 MyComponent에 onClick값을 설정하면

1<MyComponent onClick={doSomething}/>

MyComponent를 클릭할 때, doSomething함수를 실행하는 것이 아니라,
그냥 이름이 onClick인 props를 MyComponent에게 전달하는 것임

3. 지원하는 이벤트 종류

React의 이벤트들은 이벤트 버블링 단계에서 호출됨

4. 예시

캡처링 = 부모 요소의 어떤 자식이 불렀는지 체크함
버블링 = 자식 요소가 부모 요소에 불렀는지 체크함
- 캡처링 이후에 수행
- 캡처링 단계에서 쓰고 싶으면…
  - 즉, 자식이 부모보다 먼저 인식되게 만들고 싶을 떄 사용

1export default function Event() {
2  const handleClick = e => {
3    console.log('버튼 눌렀네?🤡 - 세번쨰 호출')
4  }
5
6  const handleClickCapture = e => {
7    console.log('handleClickCapture 버튼👽 - 첫번쨰 호출')
8  }
9
10  const handleClickCapture2 = e => {
11    console.log('handleClickCapture2 버튼🤪 - 두번쨰 호출')
12  }
13
14  const handleClickBubble = () => {
15    console.log('handleClickBubble 버튼😫 - 네번쨰 호출')
16  }
17
18  return (
19    <div onClickCapture={handleClickCapture}>
20      <div onClickCapture={handleClickCapture2} onClick={handleClickBubble}>
21        <button onClick={handleClick}>Button</button>
22      </div>
23    </div>
24  )
25}

[참고]

10-useRef 12-고차컴포넌트(HOC)