eventlistener-in-react.md

eventlistener-in-react.md

리액트 컴포넌트 안에서 이벤트 리스너 정의할 때 주의할 점

import React, { Component } from "react";

// 시간을 입력해서 카운트 다운하는 엘리먼트 만들기
class AlertCounter extends Component {
  state = {
    reminds: '00:00:00'
  }
  startCount = () => {
    console.log('hi')
  }

  render() {
    return (
      <div>
        <h1>Alert Counter</h1>
        <form>
          <input type="text" placeholder="set time(min)"></input>
          <button onClick={this.startCount()}>START</button>
        </form>
        <p>{this.state.reminds}</p>
      </div>
    );
  }
}

export default AlertCounter;

버튼에 onClick={this.startCount()}로 써서 에러났다.
(정확히는 에러는 아니고 의도한대로 작동을 안함, 즉 버튼 누를 때마다 콘솔에 hi라고 찍혀야 하는데 이게 누적되지 않았음)

이유는 컴포넌트(버튼)이 렌더링 될 때 해당 함수가 호출이 되므로 처음에 hi 한 번 찍히고 새로 렌더링 되고 그런 듯
(setState는 안 써서 무한 반복, 에러는 안 났지만 setState 포함되었으면 state가 바뀔 때마다 렌더링을 새로 하므로 에러 났을 듯)

참고 : https://velopert.com/3629 이벤트에 전달해주는 값은 함수 여야 합니다. 만약에 onClick={this.handleIncrease()} 이런식으로 하게 된다면, 렌더링을 할 때 마다 해당 함수가 호출이됩니다. 그렇게 되면 정말 큰 일이 발생합니다. 렌더링 -> 함수 호출 -> setState -> 렌더링 -> 함수 호출 -> 무한반복.. 이렇게 되버리는 것이죠! 그러니까 꼭 주의하셔야 합니다. 렌더링 함수에서 이벤트를 설정 할 때 여러분이 만든 메소드를 호출하지 마세요!

또 주의해야 할 실수 https://youtu.be/L0s7R4qwL4k?t=5m50s

onClick={()=>Func(arg)} 랑 onClick={Func(arg)} 랑 다름
전자는 onClick을 할 때 () 인자값 받아서 뒤에 함수 실행하라는 말이고, 후자는 렌더링 될 때 함수 바로 호출되서 에러