리액트 컴포넌트 라이프 사이클

PureComponent와 불변 변수로 성능을 높임

• Component 클래스로 선언한 컴포넌트는 비교과정없이 항상 새로 출력
• PureCompoenent 클래스로 선언한 컴포넌트에서는 shouldComponentUpdate() 함수에서 shallowEqual() 함수로 얕은 비교를 하여 데이터의 변경이 있으면 화면에 새로 출력
• 얕은비교(shallowEqual())의 성능을 높이기 위해 불변 변수를 사용

  예를 들어 에어비앤비는 1,000개가 넘는 숙소 정보를 화면에 출력합니다. 그런데 한 곳의 숙소 예약이 가득차게 되어 1개의 정보만 바뀔 수도 있습니다. 1개의 숙소 정보가 바뀔 때마다 999개의 숙소 정보를 비교하면 비효율적이겠죠. 이런 경우에는 불변 변수를 활용해 숙소 정보가 발뀔 때마다 새 배열을 할당하는 방식으로 비교 속도를 최적화할 수 있습니다.
  출처: 책/Do it! 리액트 프로그래밍 정석/3장 리액트 컴포넌트

• 불변변수를 사용한다는 것은, 변경된 정보는 새로운 객체로 할당하는 것을 의미
• 새로운 객체로 할당하면, PureComponent입장에서 shallowEqual() 결과 false가 되기때문에 변화를 판단하기 쉬움
• shallowEqual()을 사용하는 이유는, 비교 검사작업의 성능을 높이기 위해서

Reference

• https://ko.reactjs.org/docs/react-component.html#forceupdate
• 책/Do it! 리액트 프로그래밍 정석