[React] React.PureComponent(성능 향상)

PureComponent & memo

Component에 state나 props에 변화가 없다면 render 함수가 호출되지 ❌

 

React.PureComponent

React.PureComponent는 React.Component와 비슷하다. React.Component는 shouldComponentUpdate()를 구현하지 않지만, React.PureComponent는 props와 state를 이용한 얕은 비교(레퍼런스만 비교해서 안에 데이터가 달라져도 동일한 오브젝트)를 구현한다는 차이점만이 존재한다. 참조값이 동일하면 업데이트 ❌ => ShouldComponentUpdate 함수는 false를 리턴

React 컴포넌트의 render() 함수가 동일한 props와 state에 대하여 동일한 결과를 렌더링한다면, React.PureComponent를 사용하여 경우에 따라 성능 향상을 누릴 수 있다.