예제 코드에서는 setState()를 생성자가 실행하는 launchClock()에서만 사용했지만, 실제로는 다른 곳에서도 사용할 수 있다. 일반적으로 setState()는 이벤트 핸들러나 데이터 수신 또는 갱신을 처리하는 콜백함수에서 호출된다.
tip
this.state.name= 'new name' 같은 방식으로 상태를 변경하는 것은 아무 효과가 없다. 이렇게 하면 렌더링을 다시 하지도 않고, 실제 DOM을 갱신할 수도 없다. 대부분의 경우에 setState()를 거치지 않고 직접 상태 객체를 변경하는 것은 안티패턴이므로 피해야 한다.
setState()로 전달하는 상태는 상태 객체의 일부분만 갱신한다는 것을 알고 있어야 한다(일부분만 수정하거나 병합하고 완벽하게 교체하지는 않는다). 매번 상태 객체를 완전히 바꾸지 않는다. 따라서 상태 객체에 세 항목이 있을 때 하나를 변경한다면, 나머지 둘은 그대로 유지되어 바뀌지 않는다. 다음 예제 코드에서 userEmail과 userId는 그대로 유지된다.
constructor(props) {
super(props)
this.state = {
userName: 'Azat Mardan',
userEmail: 'hi@azat.co',
userId: 3967
}
}
updateValues() {
this.setState({userName: 'Azat'})
}