state와 setState
state는 클래스 안에서 데이터를 저장하는 일종의 저장소이다. 몇몇 책에서는 state를 상태 객체로 번역하는 경우가 있는데, 여기에서는 state로 표현하겠다. state를 사용할 때는 class fields 문법을 사용한다. state는 클래스 컴포넌트에서만 사용이 가능하며, 해당 컴포넌트에 데이터를 저장하고, 이를 변경할 수 있다.
이전에 학습한 props와 state는 둘 다 데이터를 갖고 있다는 점에서 공통점이 있지만, 몇 가지 차이점이 있다. 우선 props는 값을 변경할 수 없고, state는 변경이 가능하다. state 값을 변경할 때는 setState를 사용한다. 다음으로 props는 부모 컴포넌트에서 값을 전달하지만, state는 해당 컴포넌트에서 값을 정의한다.
먼저 App 클래스 컴포넌트 안에 state 초기값을 설정한다. 그리고 render()의 return 문에서 {this.state.lastName}, {this.state.firstName}, {this.state.age}로 뷰에 반영한다.
state 안의 값이 출력된다.state와 props를 결합하면 부모 컴포넌트에서 정의한 state 값을 자식 컴포넌트에게 전달할 수도 있다.
앞에서도 언급했지만 state는 함수형 컴포넌트에서 사용할 수 없다는 점을 꼭 기억해 두자!
setState
setState()는 state 값을 변경할 때 사용된다. this.setState() 형태로 입력하며, 비동기 형태로 값이 변경된다.
setState 안에 정의된 값으로 변경된다.setState() 사용시 유의점 (1) : state로 직접 변경해서는 안된다.
state 값을 변경할 경우에는 절대로 아래와 같이 state를 직접 변경해서는 안된다. 무조건 setState()를 사용해서 변경해야 한다.
어떠한 변화도 없다.setState 사용시 유의점 (2) : 이전 상태 값을 기반으로 값을 변경할 경우
앞에서도 언급했지만 state는 비동기 방식으로 업데이트된다. 그렇기 때문에 setState()를 사용했다고 해서 state 값이 바로 변경될 것이라는 것을 기대할 수 없다. 때문에 state의 이전 값을 기반으로 값을 변경할 때는 주의해서 작성해야 한다.
setState() 안에 이전 값을 기반으로 state 값을 연속적으로 변경해도 그 결과 값은 한 번만 반영이 된다.
한 번만 업데이트 된다.만약 이전 state 값을 기반으로 지속적으로 값을 변경하고 싶다면, 아래와 같은 방식으로 작성하면 된다.
모든 변경 값이 반영된다.