리엑트에서 요소에 이벤트를 추가할때, 내장된 html요소의 이벤트리스너를 추가한다.
다만,
바닐라 자바스크립트처럼 DOM요소에 접근해서 addEventListner()를 불러오는 대신에 props를 설정하는데 on으로 시작하는 속성값이다.
이게 결국 JSX로 사용되는 이벤트 리스너 적용방법이고 이를 통해 사용자의 입력값을 받아 리엑트에서 해당 요소의 사용자 이벤트를 일으킬 수 있게 하는 방법이다.
그렇다면 어떻게 button요소가 onClick이벤트를 어떻게 받아야 이벤트가 정상적으로 동작할까?
우선 벌어질 동작을 정의 해야하는데, 클릭이벤트에 값을 할당해야하고 실행되어야하기때문에 함수형태로 넣어줘야한다.
모든 이벤트 헨들러 props는 값으로 함수가 필요하고, 이벤트가 발생(클릭했을때) 그 함수가 실행 되어야 한다.
{ } 안에 화살표함수로 바로 함수를 생성할 수 도 있지만, 코드가 길어지고 복잡해지게 되면 JSX코드 안에 수많은 함수들이 직접적으로 들어가게 되며 가독성이 현저히 떨어지게 된다.
그렇기에 일반적으로는 값이 반환되기 전에 함수를 정의해준다. 화살표함수 혹은 function키워드 둘 중 아무거나 상관없다.
function ExpenseItem(props) {
const handleClick = () => {
setTitle("upDated!!");
console.log(title);
};
return (
<Card className="expense-item">
<ExpenseDate date={props.date} />
<div className="expense-item__description">
<h2>{title}</h2>
<div className="expense-item__price">${props.amount}</div>
</div>
<button onClick={handleClick}>Change Title</button>
</Card>
);
}
export default ExpenseItem;위 코드에선 handleClick함수를 button태그안에 onClick이벤트 헨들러안에 함수로 지정해줬다.
여기서 주의할 점은 함수 handleClick를 실행하지 않고(소괄호()를 함수 뒤에 붙이지 않고) 함수이름만 그대로 지정해주었다.
왜 저렇게 해야할까?
그 이유는 만약 저기서 괄호를 추가했다면 이 코드가 분석되었을때 자바스크립트가 이것을 이미 실행 했을것이다. 그리고 JSX코드가 반환될 때 또한 분석되게 된다.
쉽게얘기해서 정의한 함수가 버튼이벤트 헨들러가 클릭될 때 실행되는게 아니라, jsx코드가 평가될 때 실행되는 것이다.
따라서, JSX코드상에 함수 이름만 지정해 주고, handleClick함수를 값으로하는 onClick 포인터를 전달하게 되면 리엑트는 이것을 기억했다가 사용자의 클릭 이벤트가 감지 될때마다 실행하게 되는것이다.
