React에서의 이벤트 바인딩

React에서 이벤트를 바인딩하는 방법은 조금 다르다. 함수형 컴포넌트에서 이벤트 핸들러는 일반적으로 함수 내부에 작성된다. 그리고 이 핸들러를 이벤트에 바인딩하기 위해 JSX 문법을 사용한다.

function MyButton() {
    const handleClick = () => {
        console.log('Button was clicked!');
    };

    return (
        **<button onClick={handleClick}>**
            Click me!
        </button>
    );
}

React에서의 이벤트 핸들러 이름은 camelCase를 사용하고, 이벤트 핸들러는 JSX 엘리먼트에 문자열이 아닌 함수로 전달된다.

React의 함수형 컴포넌트에서는 이벤트 핸들러를 정의할 때 this 바인딩에 대해 걱정할 필요가 없다. 왜냐하면 함수형 컴포넌트는 this를 사용하지 않기 때문이다. 따라서, bind 메서드를 사용하는 것에 대해 걱정할 필요가 없다.

React와 바닐라 자바스크립트 모두 이벤트 핸들러를 함수로 정의하고, 해당 함수를 이벤트에 연결(bind)하는 방식으로 이벤트 바인딩을 한다. 하지만 이벤트를 바인딩하는 구체적인 방법은 라이브러리나 프레임워크에 따라 다르다.

이벤트 바인딩 하는 부분만 Ex)

 // 이벤트 핸들러 선언
    const clickHandler = e => {
        console.log('버튼 클릭함 !');
    }

  return (
    <Card className='expense-item'>
        {/* 날짜처리하는 컴포넌트 별도로 처리 ! */}
        <ExpenseDate exDate={date}/>
        <div className='expense-item__description'>
            <h2>{title}</h2>
            <div className='expense-item__price'>{formattedPrice}원</div>
        </div>

                        **// 캐멀케이스이고 컴포넌트 내부에 {} 로 이벤트 바인딩하여 사용 !**
        <button id='btn' **onClick={clickHandler}**>버튼</button>
    </Card>
  )
}

import React from 'react';
import './ExpenseItem.css';
import ExpenseDate from './ExpenseDate';
import Card from '../UI/Card';

export const ExpenseItem = ({date, title, price: exPrice}) => {  // 디스턱처링하여 앞에 붙이지 않고 꺼내서 단순하게 사용 !
    // console.log('props: ', aaa);

    // 함수 선언
    **let itemTitle = title;**

    // 원화 표기법으로 변환
    const formattedPrice = new Intl.NumberFormat('ko-KR').format(exPrice);

    **// 이벤트 핸들러 선언**
    const clickHandler = e => {
        
        console.log('버튼 클릭함 !');
        
        **// 아래 하하호호로 제목 상태가 수정될 수 없다.
        // 로그로 찍어보면 '하하호호' 로 제목 상태가 변한거 같지만
        // 재렌더링을 시키지 못하여 화면엔 변경된 제목이 보이지 않음**
        **itemTitle = '하하호호';
        console.log('itemTitle:' , itemTitle)**

        // const $price = document.querySelectorAll('.expense-item__price');
        // console.log($price);
    };

  return (
    <Card className='expense-item'>
        {/* 날짜처리하는 컴포넌트 별도로 처리 ! */}
        <ExpenseDate exDate={date}/>
        <div className='expense-item__description'>
            <h2>{title}</h2>
            <div className='expense-item__price'>{formattedPrice}원</div>
        </div>

                   // 이렇게 사용하면 재렌더링이 안되며 useState로 상태를 저장해둬야 한다 !
        <button id='btn' **onClick={clickHandler}**>제목 수정</button>
    </Card>
  )
}

export default ExpenseItem;

useState로 상태값 변경한 결과 화면에 렌더링 해주도록 보완

import React, {useState} from 'react';
import './ExpenseItem.css';
import ExpenseDate from './ExpenseDate';
import Card from '../UI/Card';

export const ExpenseItem = ({date, title, price: exPrice}) => {  // 디스턱처링하여 앞에 붙이지 않고 꺼내서 단순하게 사용 !
    // console.log('props: ', aaa);

    // 함수 선언

    // 💡💡useState는 컴포넌트의 상태값을 관리하며 이 상태값은 렌더링에 영향을 미침
    /*
      - useState 훅의 리턴값은 배열이며
      - 첫번째 요소는 관리할 상태값의 초기값
      - 두번째 요소는 해당 상태값을 변경할 때 사용하는 setter 함수
    */
    const [itemTitle, setItemTitle] = useState();
   

    // 원화 표기법으로 변환
    const formattedPrice = new Intl.NumberFormat('ko-KR').format(exPrice);

    // 이벤트 핸들러 선언
    const clickHandler = e => {
       /*
         - useState가 관리하는 상태값은 반드시 setter로만 변경해야 한다 !
       */
       setItemTitle('짜짱면');
       
        console.log('버튼 클릭함 !');
    };

  return (
    <Card className='expense-item'>
        {/* 날짜처리하는 컴포넌트 별도로 처리 ! */}
        <ExpenseDate exDate={date}/>
        <div className='expense-item__description'>
            <h2>{itemTitle}</h2>
            <div className='expense-item__price'>{formattedPrice}원</div>
        </div>

        <button id='btn' onClick={clickHandler}>제목 수정</button>
    </Card>
  )
}

export default ExpenseItem;

import React, { useState } from 'react'

const Counter = () => {

    // 숫자 증감 시키는 컴포넌트 => 숫자 증감 상태를 useState로 처리하여 클릭이벤트에 넣어주면 됨 !
    const [count, setCount] = useState(0);

    const increaseHadler = e => {
        setCount(count + 1);
    };

  return (
    <div>
        <h1>숫자 : {count}</h1>
        <button onClick={increaseHadler}>증가</button>
        <button onClick={e => setCount(count - 1)}>감소</button>
    </div>
  );
};

export default Counter