<React> PureComponent

class Component에서도 두 종류가 있습니다.

• React.Component
  class Component extends React.Component
• React.PureComponent
  class Component extends React.PureComponent

PureComponent는 Component와 비슷하지만 shouldComponentUpdate가 구현되어 있다는 점에서 다릅니다. React 컴포넌트의 render() 함수가 동일한 props와 state에 대하여 동일한 결과를 렌더링한다면, React.PureComponent를 사용하여 경우에 따라 성능 향상을 누릴 수 있습니다.
- React docs -

즉, React자체에서 Virtual DOM을 통해 update 된 부분만 실제 update 해주는 것은 맞지만 render함수는 state나 props가 변경된 Component와 그 Component의 모든 자식 Component에 대해 호출된다. 따라서 업데이트되는 Component들 중에는 props나 state가 update되지 않았는데도 render함수가 호출되어 다시 render되는 Component들이 있습니다. 이러한 현상에 의해 메모리가 잡아먹히는 것을 막기위해 PureComponent를 사용하면 성능 향상을 얻을 수 있다는 것입니다.

PureComponent는 얕은(shallow) 비교만을 수행하기 때문에 props나 state안의 데이터로 Object가 있었다고 하면 Object의 내용이 바뀌어도 참조(reference) 주소가 동일하기 때문에 render()함수를 호출하지 않습니다. 예를 들어 아래와 같이 age가 변경되었는데도 render함수는 호출되지 않겠죠. 따라서 PureComponent는 변경 사항에 대해 주의하여 사용해야 합니다.

//변경 전 Object
Object = {
  name: "minseok",
  age: 27
}

Object.age = 28;

//변경 후 Object
Object = {
  name: "minseok",
  age: 28
}

따라서 update되기 위해서는 아예 새로운 Object를 만들어주어야합니다.