React : 이벤트 설정!

render 함수에서 이벤트 설정 한 부분을 확인해보자!

render() {
  return (
    <div>
      <h1>카운터</h1>
      <div>값: {this.state.number}</div>
      <button onClick={this.handleIncrease}>+</button>
      <button onClick={this.handleDecrease}>-</button>
    </div>
  );
}

버튼이 클릭되면 함수가 각각 호출되도록 설정되어 있지?

기존에 자바스크립트로 비슷한 작업을 해봤다면 익숙할거야

 

위 코드를 다시 봐보자고!

정말로 주의해야 할 점이 있는데!

리액트에서 이벤트 함수를 설정할 때 html과는 다른 점이 있어!

• 이벤트이름을 설정 할 때 camelCase 로 표기해야 해. onclick 은 onClick, onmousedown 은 onMouseDown, onchange 는 onChange 이런식으로!
• 이벤트에 전달해주는 값은 함수 여야 해. 만약에 onClick={this.handleIncrease()} 이런식으로 하게 된다면, 렌더링을 할 때 마다 해당 함수가 호출이 되거든. 그렇게 되면 정말 큰 일 난다... 렌더링 -> 함수 호출 -> setState -> 렌더링 -> 함수 호출 -> 무한반복.. 이렇게 되버리거든..

그러니까 랜더링 함수에서 이벤트를 설정할 때 우리가 만든 메소드를 호출하면 절대 안돼!!!

 

그러면 이제 컴포넌트를 App에서 불러서 랜더링 해보자고!!

 

 

참고: velopert.com/3629