더북(TheBook)

3.3.6 state 값을 업데이트할 때 주의 사항

 

state 값을 업데이트할 때는 언제나 .setState로만 업데이트해야 합니다. 예를 들어 다음은 잘못된 코드입니다.

this.state.number = this.state.number + 1;
this.state.someArray.push(3);
this.state.someObject.value = 3;

 

setState() 메서드가 하는 역할은 파라미터로 전달받은 필드를 업데이트한 후 컴포넌트가 리렌더링하도록 트리거하는 것입니다. 하지만 이렇게 state에 직접 접근하여 값을 수정하면 컴포넌트를 자동으로 리렌더링하지 않습니다. 이때 this.forceUpdate() 메서드를 호출하여 강제로 리렌더링을 시작할 수 있지만, 이 방식은 매우 비효율적이므로 웬만하면 사용을 피해야 합니다.

그렇다면 배열이나 객체를 업데이트할 때는 어떻게 해야 할까요? 이런 상황에서는 배열이나 객체 사본을 만들고 그 사본에 값을 업데이트한 후, 사본으로 값을 설정하는 방식으로 진행합니다. 이것은 8장에서 자세히 알아보겠습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.