컴포넌트 State

setState 를 통해서 리액트의 state를 변경할 수 있다.

 

state 가 변경되면, 페이지는 다시 렌더링 된다.

 

props 와 state 모두 결과물에 영향을 주는 데이터이다. 

 

두가지의 차이는 props 는 함수에서 매개변수를 전달하는 것처럼 컴포넌트에 props를 전달해서 사용할 수 있다.

state 는 함수내에서 선언된 지역변수처럼 컴포넌트 안에서 관리되고 사용된다.

==================

setState 는 비동기로 처리되므로 , 연속된 setState 의 함수 열거는 잘 작동하지 않을 수 있다.

예를들어

incrementCount() {

  this.setState({count: this.state.count + 1});

}

this.incrementCount();
this.incrementCount();
this.incrementCount();

위는 잘 작동하지 않을 수 있다 . this.state.count 가 이전 직전의 state값을 가져오지 않을 수 있다.

 

그래서 아래와 같이 해보자. 

incrementCount() {
  this.setState((state) => {   // 중요: 값을 업데이트할 때 `this.state` 대신 `state` 값을 읽어옵니다.
    return {count: state.count + 1}
  });
}