[React.js] state를 바꾸는 방법 (setState)

state를 바꾼다는 것은 화면에 출력할 것 중 변경되는 것이 있다는 것을 의미한다.

그래서 state를 바꾸게되면, render() 함수가 자동으로 호출되어 바뀐 부분만 재빠르게 변경된다.

 

하지만, 첫번째와 같이 쓰면 state가 변경되지 않고 rerender하지 않는다. 두번째 방법으로 써야 state를 변경하고, render()함수를 호출 하여 원하는 글자를 바꿀 수 있다.

 

this.state.value = 1       // X
this.setState({value:1});  // O

 

 

가끔 this.state에 있는 값을 참조하여 값을 바꾸는 경우가 있는데, 보통의 경우라면 아래와 같이 쓸 수 있다.

plus = () => {
    this.setState({value: this.state.value + 1});
}

 

하지만, 위와 같이 this.state를 직접 불러와서 쓰는 것은 나중에 성능상의 문제가 될 수 있다고 한다. (by 노마드 코더님)

그래서 아래와 같이 쓰는 것이 훨씬 더 좋은 습관이라고 한다. (침대에 붙여놓고 외우라고 할정도로 중요하다고 한다!) 

 

plus = () => {
    this.setState(current => ({value: current.value + 1}));
}