이벤트 핸들링

리액트의 이벤트 시스템

  리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하다. 다만 주의해야 할 사항이 몇 가지 존재 한다.

• 이벤트 이름은 카멜 표기법으로 작성한다.
  • 예를 들어 HTML의 onclick은 리액트에서는 onClick으로 작성해야 한다.
• 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 객체 값을 전달해야 한다.
• DOM 요소에만 이벤트를 설정할 수 있다.
  • 직접 만든 컴포넌트에 이벤트를 자체적으로 설정할 수 없기 때문에 onClick 이벤트를 전달하려고 한다면 그것은 그냥 이름이 onClick인 props를 전달해 줄 뿐이다.

input 여러 개 다루기

  setState를 여러 개 만들어 상태를 관리하는 방법도 있을 수 있고 관리해야 하는 input에 들어온 값들을 하나의 객체로 만들어 관리하는 방법도 존재할 것이다. input창이 몇 가지 없다면 각 input에 들어온 값들은 useState 하나씩 관리해도 되겠지만 input창이 여러 개라면 아무래도 하나의 객체로 만들어 관리하는 편이 가독성이 좋을 것이다. 그리고 하나의 객체로 값을 관리할 때 유용하게 사용할 수 있는 값이 바로 event.target.name이다. event.target.name은 해당 인풋의 name을 가리킨다. 

 

코드로 확인해 보자

import { useState } from "react";

const Practice = () => {
  const [form, setForm] = useState({
    username: "",
    message: "",
  });

  const { username, message } = form;

  const handleChange = (event) => {
    const nextForm = {
      ...form,
      [event.target.name]: event.target.value,
    };
    setForm(nextForm);
  };

  return (
    <div>
      <div>{username}</div>
      <div>{message}</div>
      <input name="username" onChange={handleChange} />
      <input name="message" onChange={handleChange} />
    </div>
  );
};

export default Practice;

  위의 예시는 내가 급하게 작성한 코드들이기 때문에 예시에 적합한지는 잘 모르겠지만, handleChange 함수부분을 잘 살펴 보면 아주 간단하게 여러 input창이 존재함에도 하나의 이벤트 핸들러와 하나의 state를 통해서 데이터 관리를 할 수 있다. 코드가 굉장히 간결해 지는 점을 확인할 수 있다.