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

지금까지 만든 간단한 화면은 정적이기 때문에 동적으로 바꾸어 보려고 한다. 

리액트는 모든 기본 이벤트를 on으로 시작하는 props로 노출한다

예를 들면 onClick

클릭 이벤트를 위해서 onClick을 props로 button에 추가한다.

이벤트가 실행되기 위해서는 함수가 실행되어야 한다

1. 익명의 화살표 함수를 이용해서 실행할 수 있다.

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

하지만 수 많은 코드를 jsx에 넣는 것은 선호하지 않을 것이다

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

코드를 보면 이렇게 clickedHandler에 () 를 붙이지 않은 것을 볼 수 있다

만약 여기에서 괄호를 붙이면 코드라인이 분석되었을 때 자바스크립트는 이것을 실행했을 것이다
jsx코드가 반환될 때 이 코드라인은 분석된다 

그래서 클릭했을 때 clickHandler가 실행되는 것이 아니라 jsx코드가 평가될 때 실행된다.
그 시점이 너무 이르기 때문에 clickHandler를 지정하기만 하면 되는 것이다

함수만 지정하여 onClick을 위한 값으로  포인터를 전달하고 리액트는 이것을 기억했다가 클릭할 때마다 함수를 실행한다.
즉 어떤 요소에 이벤트 리스너를 할당할 때 JSX코드를 평가할 때 실행되지 않고 클릭할 때 실행되도록 () 를 작성하지 않는다 

 

일부 이벤트는 특정한 요소에서만 사용 가능하지만 
onClick은 모든 요소에 작성 가능하며, 모두 기본적으로 DOM 동작에 기반한다

선생님이 이벤트 리스너 이름을 정할 때는 clickHandler 처럼 이벤트 기능 + Handler 과 같은 형태로 짓는다.