TIL 44 | React.PureComponent, React.memo

🛠️ React.PureComponent

• React.PureComponent는 React.Component와 매우 유사하다.
• Component와 PureCompoent 차이는 성능적인 차이로, PureComponent는 shouldComponentUpdate를 통해 props와 state의 얕은 비교를 하여 불필요한 리렌더를 막아준다.
• PureComponent를 잘못 사용하면 오히려 성능 감소를 일으킬 수 있다.
• 현재와 다음의 state와 props가 같은 경우에는 false를 반환하여 리렌더 하지 않고, 반대의 경우 true를 반환해준다.

🛠️ React.memo

• UI 성능을 증가시키기 위해, React 고차 컴포넌트에서 React.meno를 제공한다.
• 렌더링 결과를 메모이징(Memoizing)함으로써 불필요한 리렌더링을 방지한다.
• 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징된 내용을 재사용한다.
• 즉, 메모이징한 결과를 재사용함으로써 React에서 리렌더링을 할 때, 가상 DOM에서 달라진 부분을 확인하지 않아 성능상의 이점을 누릴 수 있다.

function MyComponent(props) {
  /* props를 사용하여 렌더링 */
}
function areEqual(prevProps, nextProps) {
  /*
  nextProp가 prevProps와 동일한 값을 가지면 true를 반환하고, 그렇지 않다면 false를 반환
  */
}
export default React.memo(MyComponent, areEqual);

Reference

• React.memo() 현명하게 사용하기 →(BLOG)
• React - PureComponent →(ORG)
• React - PureComponent 제대로 사용하기 →(SITE)