[React 기본] PureComponent란 ? (Component, PureComponent차이)

---

pureComponent 하기 전에 알아야 할 개념

리액트의 데이터 하나 바뀐다고 계속되는 re-rendering 성능에 문제 없나요 ?

리액트는 state가 변화되면 전체 컴포넌트의 render 함수가 호출되는데, 단 한개라도 변경이 감지되면 모든 컴포넌트가 re-rendering된다. 
이게 성능이나 속도에 문제가 되지 않나 ? 싶을 수 있지만, VDom(Virutal Dom)이라는 메모리상의 트리구조를 사용하기 때문에 실제로는 진짜 필요한 컴포넌트만 업데이트하므로 문제가 없다.

 

컴포넌트가 업데이트 되는 것을 확인하려면 어떻게 하나요 ?

개발자도구의 components탭에서 설정모양에서 high lightes when components render 체크박스를 선택하고 이벤트를 실행시켜 보면 데이터가 변경될때 업데이트 되는 컴포넌트에 네모박스가 쳐져 보인다.

개발자도구의 components탭 설정모양

 

high lightes when components render  체크박스

 

업데이트될때 네모박스가 쳐지는 모습

 

그런데, 그럼에도불구하고 컴포넌트 안에서도 모든게 업데이트될 필요는 없고 데이터 한개만 업데이트 되게 하고 싶으면 어떻게 하나요 ?

이럴때 사용하는게 pure component 또는 memo! 컴포넌트의 state나 props에 변화가 없다면 render함수가 불려지지 않는게 PureComponent이다. (class => PureComponent / function => memo)

 

 

 

---

리액트 공식문서에 있는 PureCompont 

출처: https://ko.reactjs.org/docs/react-api.html#reactpurecomponent

PureComponent와 Component가 다른점은, shouldComponentUpdate 라는 함수가 실행되는데,
이전의 props과 state를 비교하여 (가볍게 비교!!!! shallow !!) 진짜 필요한 컴포넌트만 업데이트를 해주는 함수이다.
여기서 주의할 점은 '가볍게' 비교한다는 것이다. 따라서 객체나 배열은 통으로 바뀌지 않는 이상, 안에 내용이 바뀐다고해서 알아채지 못한다. 이 점을 주의해야한다.

 

 

 

 

---

PureComponent 실제 적용 예제

https://joannashin.tistory.com/86

[React 기본] PureComponent 실제로 해보기