이벤트 리스닝 및 이벤트 핸들러 수행하기

-ExpenseItem.js

import './Expenseltem.css'
import ExpenseDate from './ExpenseDate';
import Card from '../UI/Card';
function ExpenseItem(props) {
    const clickHandler = () => {
        console.log('Clicked!!!!');
    }

    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>
            </div>
            <button onClick={clickHandler}>Change Title</button>
        </Card>
    );
}

export default ExpenseItem;

<button> 태그에 onclick 이벤트를 넣고 원하는 상수를 실행!

만약!

함수로 만들어 함수로 실행하기를 원했으면 

function clickHandler() {
        console.log('Clicked!!!!');
    }

함수를 생성하고 

<button onclick={clickHandler()}></button>

위와 같이 호출하면된다.

 

2개중 어떤것을 써도 상관없이 출력은 된다.

위와 같이 하면 실행될때 clickHandler가 실행되는 것이 아니라 JSX코드가 평가될 때 실행됩니다.