리액트 이벤트 처리하기

오늘은 리액트에서 이벤트 핸들러를 수행하는 방법에 대해 알아보자

 

 

이벤트 핸들러

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트 처리하는 방식과 매우 유사하지만 몇 가지의 문법 차이가 존재한다. 문법의 차이는 다음과 같다. 

• React의 이벤트는 소문자 대신 캐멀 케이스를 사용한다. 예) onclick (X), onClick (O)
  일반적으로 props에서 이벤트를 찾을 때는 on접두사를 붙인 뒤 이벤트를 찾고, 함수의 이름은 handleClick처럼 handle 접두사를 지정하여 처리하는 것이 일반적이다. 
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. 

아래부터는 여러 이벤트 헨들러를 다루는 예를 소개해볼 예정이다. 

 

 

 

버튼 이벤트 핸들링

아래는 button에 새로운 이벤트 핸들러를 전달하기 위한 예시 코드이다. 

 

🖥️ main.js

import "./ExpenseItem.css";

function ExpensItem(props) {
  return (
    <div className="expense-item">
      <div>{props.date.toISOString()}</div>
      <div clasName="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
      <button>hello</button>
    </div>
  );
}

export default ExpensItem;

일반적인 js형식으로 이벤트를 추가하려고 한다면 document.getElementByid('root').addEventListener() 형식으로 이벤트를 추가하여 진행하지만, 리액트에서는 JSX 방식으로 이벤트를 핸들링할 수 있다.

 

 

🖥️ main.js

import "./ExpenseItem.css";

function ExpensItem(props) {
  const handleClick = () => {
    console.log("clicked");
  }


  return (
    <div className="expense-item">
      <div>{props.date.toISOString()}</div>
      <div clasName="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
      <button
        onClick={handleClick}
      >
        hello
      </button>
    </div>
  );
}

export default ExpensItem;

 

 

 

 

입력 이벤트 핸들링

이번에는 입력 이벤트 핸들링에 대해 알아본다. DOM과 관련된 이벤트가 발생하면 관련 정보는 모두 event객체에 저장이 된다. 이벤트 발생 요소, 이벤트 타입, 이벤트 관련 데이터도 모두 저장되어 있기 때문에 이벤트 객체를 잘 다루면 원하는 데이터를 꺼내 사용할 수 있다. 

 

아래 코드는 input안의 내용이 바뀔 때 그 바뀌는 값들을 콘솔창에 출력하는 코드이다. 

 

🖥️ ExpenseForm.js

import React from "react";
import "./ExpenseForm.css";

const ExpenseForm = (props) => {
  
  // event객체를 받아서 타겟안의 값을 출력하는 함수 작성
  const handleChange = (event) => {
    console.log(event.target.value);
  };

  return (
    <form>
      <div className="new-expense__controls">
        <div className="new-expense__control">
          <label>Title</label>
          <input type="text" onChange={handleChange} />
        </div>
        <div className="new-expense__control">
          <label>Amount</label>
          <input type="number" min="0.01" step="0.01" />
        </div>
        <div className="new-expense__control">
          <label>Date</label>
          <input type="date" min="2019-01-01" max="2023-07-10" />
        </div>
      </div>
      <div className="new-expense__actions">
        <button type="submit">Add Exepnse</button>
      </div>
    </form>
  );
};

export default ExpenseForm;

 

 

 

기본 동작 제어 이벤트 핸들링

이번에는 원래 있던 기본 동작을 실행하지 않도록 지정하는 방법에 대해 알아본다. onclick 또는 onsubmit 이벤트에는 원래 기본 동작이 탑재되어 있는데 이를 event.preventDafult();을 통해서 기본 동작을 실행하지 않도록 설정 할 수 있다. 

 

아래는 submit 기본 동작을 막고 submit에서 넘어온 데이터를 expenseData에 담아 콘솔로 출력하는 코드이다. 

 

🖥️ ExpenseForm.js

import React, { useState } from "react";
import "./ExpenseForm.css";

const ExpenseForm = (props) => {
  const [enteredTitle, setEnteredTitle] = useState("");
  const [enteredAmount, setEnteredAmount] = useState("");
  const [enteredDate, setEnteredDate] = useState("");

  const handleChangeTitle = (event) => {
    setEnteredTitle(event.target.value);
  };

  const handleChangeAmount = (event) => {
    setEnteredAmount(event.target.value);
  };

  const handleChangeDate = (event) => {
    setEnteredDate(event.target.value);
  };
  
  // event.preventDefault();을 통해 기본 동작이 실행되지 않도록 설정
  const handleSubmit = (event) => {
    event.preventDefault();
    const expenseData = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };
    console.log("expenseData", expenseData);

    setEnteredAmount("");
    setEnteredDate("");
    setEnteredTitle("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="new-expense__controls">
        <div className="new-expense__control">
          <label>Title</label>
          <input
            type="text"
            value={enteredTitle}
            onChange={handleChangeTitle}
          />
        </div>
        <div className="new-expense__control">
          <label>Amount</label>
          <input
            type="number"
            min="0.01"
            step="0.01"
            value={enteredAmount}
            onChange={handleChangeAmount}
          />
        </div>
        <div className="new-expense__control">
          <label>Date</label>
          <input
            type="date"
            min="2019-01-01"
            max="2023-07-10"
            value={enteredDate}
            onChange={handleChangeDate}
          />
        </div>
      </div>
      <div className="new-expense__actions">
        <button type="submit">Add Exepnse</button>
      </div>
    </form>
  );
};

export default ExpenseForm;