React의 pureCompoent 특징

1. 리액트는 Component의 집합이다.

2. 데이터가 하나라도 변경되면 전체적으로 애플리케이션이 re-render 된다.

모든 elements들이 rerender 되지만, 리액트는 Virtual DOM에 이 트리를 보관하고 있고,
실제 DOM과 V-DOM을 비교해서 필요한 부분만 업데이트한다.

문제점
데이터가 변경되지 않아도 컴포넌트만 변경되면,
라이프 사이클에 등록한 로직이 수행된다.

만약 그 로직이 무거운 일이라면,
예상하지 못하게 불필요한 일을 해야할 수 있다.

이걸 방지하는 방법이 pureComponent(class인 경우)와 memo(function인 경우)이다.

pureComponent와 memo 특징

컴포넌트의 state, props에 변화가 없다면 render 함수를 부르지 않는다.

pureComponent 사용법
class에서 Component가 아니라 PureComponent를 extends 한다.

pureCompoent가 이렇게 동작할 수 있는 이유

pureComponent에는 ShouldComponentUpdate()가 구현되어 있다!
이전과 현재 props와 state를 shallow 비교해서 다르면 업데이트한다.

shallow 비교 : 데이터 상관없이 레퍼런스 값만 비교한다.
deep 비교 : 레퍼런스, 데이터 모두 비교한다.

업데이트 시 state를 바로 수정하면 안 되는 이유

shallow 비교를 사용하면 데이터 값이 변경되어도 레퍼런스가 같기 때문에 업데이트가 되지 않는다!

그럼 어떻게 전달해야 할까?

1. 자식 컴포넌트로 전달할 때 변경되는 값을 따로 props로 만들어서 전달한다.
2. 오브젝트가 변경될 때마다 새로운 오브젝트를 만든다. (더 좋은 방법!)
   라이브러리를 사용할 수 있다.