React.PureComponent는 무엇일까

shouldComponentUpdate()

• props또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출된다.
• 기본값은 true이다.
• 초기 렌더링 혹은 forceUpdate()가 사용될때는 호출되지 않는다.
• 오로지 성능 최적화만을 위한것이다.
  • props또는 state가 변할때만 렌더하기 때문에 성능 최적화에 도움이 된다.
  • 렌더링을 방지하려는 목적으로 사용할 경우 버그로 이어질 수 있다.
  • shouldComponentUpdate()의 내용을 직접 작성하는 대신에 PureComponent를 사용하는 것이 좋다.
    • 만약 이 메서드를 직접 작성할 자신이 있다면 this.props와 nextProps 그리고 this.state와 nextState를 비교한 뒤 false를 반환하는 것으로 React가 갱신 작업을 건너뛰게 만들 수 있다.
      • 여기서 false를 반환하는 것이 자식 컴포넌트들이 각자가 가진 state의 변화에 따라 다시 렌더링을 수행하는것을 막는것은 아니다.
    • shouldComponentUpdate()내에서 깊은 동일성 검사를 수행하거나 JSON.stringfy()를 사용하는것은 권장하지 않는다.
      • 비효율적이며 성능을 떨어뜨릴 수 있다.

Shallow Compare란?

숫자나 문자열 같은 scalar값들을 비교할때는 그것들의 값을 비교한다.
object를 비교할때는 그것들의 attribute를 비교하지 않고 그들의 reference를 비교합니다.
shallow compare에서 object들은 레퍼런스(참조)만 체크하기 때문에 같은 값이 들어있는 object더라도 항상 다른값으로 체크하게 된다.

React.PureComponent의 특징

• React.PureComponent의 shouldComponentUpdate()는 props와 state에 대한 얕은 비교만을 수행한다.

  • 컴포넌트에 복잡한 자료 구조가 포함되어있다면 깊은 차이가 있음에도 불구하고 차이가 없다고 판단하는 잘못된 결과를 만들어낼 수 있다.
  • 따라서 props와 state의 구조가 간단할 것으로 예상될 경우에만 PureComponent를 사용한다.
  • 깊은 자료구조의 변화가 있다면 forceUpdate()를 사용해야 한다.
  • 중첩된 데이터들을 빠르게 비교할 수 있도록 하려면 불변 객체의 사용을 검토한다.
  • 하위 트리에 대한 props 갱신 작업을 수행하지 않는다.
    • 자식 컴포넌트들이 "순수"한지 꼭 확인해야함

• React.memo는 React.PureComponent와 유사하다.

  • React.PureComponent는 클래스 컴포넌트를 위한 것이고 React.memo는 함수형 컴포넌트를 위한것이다.
  • hoc(higher order component)

React.Component vs React.PureComponent

• React.Component는 shouldComponentUpdate()를 구현하지 않지만 React.PureComponent는 props와 state를 이용한 얕은 비교를 구현한다는 차이점만이 존재한다.
• React.Component에서 shouldComponentUpdate()는 항상 true를 반환한다.
• React.Component에서는 setState가 호출될때마다 렌더된다.

참고자료

React.Component - React

React 최상위 API - React