[React] 클릭(click)이벤트 기초정리

onClick

react에선 이벤트 함수들은 'on~'으로 시작한다. 때문에 click 이벤트를 발생시키려면 onClick 이벤트를 호출해야하는데 onClick을 사용할때 함수명을 clickHandler 또는 clickHandler() 로 선언하는것에 차이가 있다.

보통 react에선 ()를 통해 함수를 식별하기 때문에 ()괄호를 붙여서 함수를 이벤트에 넣은 경우 JSX가 읽혀질때 click이벤트로 같이 호출된다. 때문에 click 시에만 동작하게 하려면 괄호를 제거하고 사용해야한다.

 

👉 예시

 

import React from "react";

import Card from "../UI/Card";

import ExpenseDate from "./ExpenseDate";
import "./ExpenseItem.css";

// 취향에 따라 function / const 로 선언할 수 있다.
const ExpenseItem = (props) => {

  const clickHandler = () => { 
    console.log("Click");
  };  

  return (
    <Card className="expense-item">
      <ExpenseDate date={props.date} />
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price ">${props.amount}</div>

        {/* 
        clickHandler 에 ()를 붙이면 안되는 이유
        JSX 는 () 로 함수를 판단하기 때문에 load 될때 실행된다
         */}
        <button  onClick={clickHandler}>Change Title</button>
      </div>
    </Card>
  );
};

export default ExpenseItem;