[React] 4장. 이벤트 핸들링 주의 사항 및 종류

• 예시

// Say.jsx
import React, { useState } from 'react';
 
const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히 가세요!');
 
  const [color, setColor] = useState('black');
 
  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      (...)

👉 이벤트 사용 시 주의 사항

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

// HTML의 onclick을 리액트에서는?
onClick

// onkeyup
onKeyUp

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

• HTML에서 이벤트를 설정할 때
  : 큰따옴표 안에 실행할 코드를 넣음.
  
  
• 리액트에서 이벤트를 설정할 때
  : 함수 형태의 객체를 전달함.
  
  

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

즉, 컴포넌트에 자체적으로 이벤트를 설정할 수 없다는 이야기! 하지만 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수는 있다.

👉 이벤트 종류

Clipboard, Keyboard, Composition, Focus, Form, Mouse, Selection, Touch, UI, Wheel, Media, Image, Animation, Transition 등...