[ TIL ] React.PureComponent란

 

0. 이용 목적

이용 목적을 알기 위해서는 react에 존재하는 component들에 대해서 알 필요가 있다.

 

✍ React.Component

• ES6 class를 사용하여 React 컴포넌트를 정의할 때 기초가 되는 class이다.
• shouldComponentUpdate를 따로 설정하지 않으면 항상 true를 반환한다.
  => setState 실행 시 무조건적으로 컴포넌트가 업데이트된다.

 

✍ React.PureComponent

• props와 state를 이용하여 React 컴포넌트를 정의할 때 기초가 된다.
• shouldComponentUpdate는 props와 state의 얕은 비교(shallow compare) 을 통해 비교한 뒤
  => 변경사항이 있을 시 : true => 리렌더링
  => 변경사항이 없을 시 : false
• setState가 실행되어도 변경사항이 없을 시 컴포넌트가 업데이트되지 않는다

얕은 비교(shallow compare)

• 변수 / 문자열일 시 값을 비교
• 객체에서는 reference 값을 비교

🚨 객체 내부 작은 데이터의 변경과는 관계 없이 동일한 레퍼런스를 가지고 있는 객체는 같다고 취급한다

 

 

1. 결론

react.component만 이용하게 되면 컴포넌트가 업데이트 될 때마다 리렌더링이 발생하고 컴포넌트 라이프 사이클 메소드가 실행되게 된다.

그 때 아무런 변화가 없는 자식 컴포넌트들도 함께 렌더링된다. 

유의미한 데이터 변경이 없음에도 불구하고 발생하는 렌더링은 성능 악화를 가져온다

따라서 React.PureComponent를 이용해 얕은 비교를 통한 렌더링 관리를 수행하는 것이 좋다.

 

그러나 얕은 비교(shallow compare)의 특성 상, 복잡한 객체의 변화가 발생할 경우에는 shouldComponentUpdate()를 직접 구현하는 것이 나을 수도 있다. component에서 shouldComponentUpdate()를 사용하는 것이 커스터마이징 가능한 범위가 넓기 때문이다.

 

 

 

 

 

 

🙇‍♀️

https://ko.reactjs.org/docs/react-api.html#reactcomponent

https://cocosy.tistory.com/25