[React] State의 Immutability

React에서 객체는 Immutable하게 다뤄진다.

 

Immutability가 가져오는 장점은 많은게 있겠지만, React에서 가장 중요한 이유는 바로 "Detect Changes"이다. ( Reactjs 공식 doc 참조 )

 

React에서는 State 또는 Props 객체가 변경될 시 변경부분을 재계산하여 Virtual DOM -> DOM 순으로 리렌더링 하게 된다.

 

이 때 객체들이 Mutable 하면 어떨까? 객체의 변경을 알기 위해서는 Object의 요소 하나하나를 모두 추적해야 객체의 변경사항을 알 수 있다.

 

하지만 객체를 Immutable하게 유지하면 prevState === State 식을 이용하여 주솟값만 봄으로써 객체의 변경사항을 확인한다.

 

간단한 식을 이용하여 리액트는 컴포넌트를 다시 재계산해야 하는지 알 수 있다.