03. 이벤트 핸들링 (1) Intro

출처 - 리액트를 다루는 기술(김민준 지음)

---

이벤트란?

사용자가 웹 브라우저에서 DOM 요소들과 상호작용 하는 것

예)

버튼에 마우스 커서 올렸을 때 -> onmouseover 이벤트

클릭했을 때 -> onclic 이벤트

Form 요소의 값이 바뀔 때 -> onchange 이벤트

 

리액트에서의 이벤트 시스템

1. 이벤트 이름은 카멜 표기법을 사용한다

HTML은 onclick 이지만

리액트는 onClick

 

HTML은 onkeyup 이지만

리액트는 onKeyUp

 

2. 이벤트에 함수 형태의 값을 전달

HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만

리액트에서는 함수 형태의 객체를 전달

즉, 중괄호 안에 함수명만 넣음 -> () 안붙임

 

예시

 

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>
  // ...

 

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

DOM 요소 : div, button, input, form, span 등