[React] 버튼 클릭 시마다 1 증가 기능

<div id="root"></div> 태그 선언후 아래 코드를 작성해 준다.

class Counter extends React.Component{
  
  constructor(props){
    super(props);
    this.state={
      value:0
    };
    this.handleClick=this.handleClick.bind(this);
  }
  
  handleClick(){
    this.setState({
      value:this.state.value+1
    });
  }
  render(){
    return(
      <div>
        <h2>{this.state.value}</h2>
        <button onClick={this.handleClick}>Press Me</button>
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
    <Counter/>
    );
  }
};

ReactDOM.render(
  <App></App>,
  document.getElementById("root")
);

 

* 클릭할때마다 증가값을 주는 메소드

두번째 방법으로 코드를 짜는것은 지양해야 한다. 

개발자 모드에서 나는 경고만 봐도 어마무시하게 길다... 

o 권장하는 방법
handleClick(){ 
   this.setState({ 
   value:this.state.value+1 
  }); 
}
  
x 전혀 권장하지 않는 방법
handleClick(){ 
  this.state.value=this.state.value+1;
  this.forceUpdate();
}

 

* 버튼 클릭할때 onClik을 거는 부분에 혹시라도 메소드 형식으로 호출하면 안된다.

this.handleClick() 으로 호출을 하게 된다면 랜더링을 할때마다 해당 함수를 실행하기 때문에 엄~~~청 많은 숫자가 나온다. 

o 정상적인 사용
<button onClick={this.handleClick}>Press Me</button>

x 비정상적인 사용
<button onClick={this.handleClick()}>Press Me</button>