[React] React 이벤트 처리

1. 이벤트(event)란?

웹 브라우저가 알려주는 HTML 요소에 대한 사건 발생을 의미하며

버튼을 클릭하거나, 메세지 입력, 스크롤 등의 행동을 말한다.

이렇게 유저의 행동에 의해 발생할 수도 있고, 개발자가 의도한 로직에 의해 발생할 수도 있다.

https://developer.mozilla.org/ko/docs/Web/API/Event

Event - Web API | MDN

 

2. 이벤트 처리(핸들링) 방법

핸들링은 다루다, 취급하다, 처리하다라는 뜻으로

이벤트가 발생했을 때 그것을 처리하는 것, 즉 웹에서 발생하는 사용자의 행동을 처리하는 것을 말한다.

 

React에서 이벤트 처리하는 방법은 별도의 핸들링 함수를 선언하고 Element에 넘겨주는 방법과 이벤트 할당하는 부분에 익명 함수를 작성하는 방법이 있다.

 

핸들링 함수 선언

function App() {
  function handleClick() {
    alert("클릭했습니다.");
  }

  return (
    <div>
      <button onClick={handleClick}>클릭하세요</button>
    </div>
  );
}

 

위처럼 이벤트 함수를 전달할 때 함수를 호출하는 것이 아닌 함수의 이름만 전달해야한다.

 

익명 함수 처리

function App() {
  return (
    <div>
      <button onClick={() => {
        alert("클릭했습니다.")
      }}>클릭하세요</button>
    </div>
  );
}

 

 

3. 이벤트 핸들러 네이밍

직접 이벤트를 만들 땐 이름을 자유롭게 설정해도 되지만, 보통 코드를 읽기 쉽게 빠르게 이해 할 수 있도록

"on" + 동사 또는 "on" + 명사 + 동사 형태로 작성.

핸들링 함수도 "handle" + 동사 또는 "handle" + 명사 + 동사 의 형태로 작성("on"을 붙여도 무방)

 

👉 onClick, onButtonClick, handleClick ...

 

4. 이벤트 객체

이벤트 객체는 이벤트가 발생했을 때 해당 이벤트의 대한 정보를 담고 있는 객체를 말한다.

예를 들어 클릭, 마우스 이동, 입력 등 다양한 이벤트가 발생하면 해당 이벤트에 대한 정보를 담고 있는 객체가 생성되고

이벤트 핸들러함수에 자동으로 이벤트 객체가 전달된다.

 

const handleClick = (event) => {
  console.log(event);
};

콘솔에 event를 찍어보면 SyntheticBaseEvent 객체가 나오는데

이 객체는 다양한 속성과 메서드가 포함되어있으며 이를 통해 이벤트에 대한 정보를 얻고 조작할 수 있다.

 

5. 컴포넌트 내 이벤트 처리

DOM Input 값을 State에 저장하기

import { useState } from "react";

function App() {
  // input에 입력한 값을 보관할 State를 생성하기
  const [inputValue, setInputValue] = useState("");
  
  function handleChange(event) {
    setInputValue(event.target.value);
  }
  
  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => {
          setInputValue(e.target.value);
        }}
      />
      <span>{inputValue}</span>
    </div>
  );
}

input에 value를 inputValue로 설정하면 input에 값을 입력하면 초기값이 빈문자열이기 때문에 아무 값도 입력되지 않는다.

input요소에 onChange 핸들러를 설정하면, 사용자가 입력한 값이 변경될 때 마다 호출이 된다.

이벤트 객체 매개변수로 받아와서 해당 이벤트의 target(이벤트가 발생한 HTML태그 = input)의 값을 읽어오며

이 값을 setInputValue 함수를 사용해서 inputValue 상태로 업데이트 한다.

 

또한 이러한 이벤트 핸들러를 따로 함수로 빼서 handleChange 함수를 만들어 사용하는게 더 좋다!

 

 

 

컴포넌트간 이벤트 전달하기

// Myform 컴포넌트

function Myform({ onChange }) {
  return <input onChange={onChange}></input>;
}

Myform 컴포넌트에서 <input>을 반환하고 props로부터 전달 받은 onChange 함수를 전달한다.

 

// App.js

function App() {
  const [username, setUsername] = useState("");
  return (
    <div className="App">
      <h1>{username}님 환영합니다.</h1>
      <Myform
        onChange={(event) => {
          setUsername(event.target.value);
        }}
      />
    </div>
  );
}

Myform 컴포넌트를 삽입하고 onChange 이벤트가 호출될 때(input value가 변경될 때) 마다 username state가 변경된다.