이벤트 리스닝 & 이벤트 핸들러

• 기존 자바 스크립트에서는...

document.getElementById("root").addEventListener

• 리액트는 JSX요소로 이동하여 이벤트 리스너를 추가함.

• 리액트는 모든 기본 이벤트를 on으로 시작하는 props로 노출함. (ex. onClick, onChange....)

• 모든 이벤트 핸들러 props는 값으로 함수가 필요함.

ex)

<button onClick={() => {console.log("clicked!"}}>Change Title</button>

위와 같이 익명의 화살표 함수를 생성하는 방식으로 바로 함수를 만들 수도 있다.

하지만 위와 같은 방식은 좋은 아이디어는 아님.

• 일반적으로, 값을 반환하기 전에 함수를 정의함.

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

// ...생략

return(
<button onClick={clickHandler}>change title</button>
)

💡 버튼에 왜 clickHandler()로 소괄호를 추가해서 실행하지 않고, 지정만 했을까?
: 소괄호를 추가했다면, 클릭했을 때 clickHandler가 실행되는 것이 아니라, 이 JSX코드가 평가될 때 실행되기 때문에 너무 이르다. 떄문에 clickHandler 함수를 지정하기만 한 것이다.