shouldComponentUpdate()와 React.PureComponent

shouldComponentUpdate()와 React.PureComponent

바뀌어야 하는 부분만 다시 렌더링하도록 해주는 성능 최적화 Lifecycle API다.

props 또는 state가 새로운 값으로 갱신되어 렌더링이 발생하기 직전에 호출된다.

shouldComponentUpdate에서 false를 반환할 경우 render()와 componentDidUpdate()는 호출되지 않는다.

• 공식문서 1 - React.Component: https://ko.reactjs.org/docs/react-component.html#shouldcomponentupdate
• 공식문서 2 - 성능 최적화: https://ko.reactjs.org/docs/optimizing-performance.html

 

왜 shouldComponentUpdate를 사용해야 하는가?

React 확장 프로그램을 설치한 후, Chrome 개발자 도구 > Component > 설정 > 'Highlight updates when components render.' 항목에 체크하면 컴포넌트가 렌더링될 때마다 파랑~빨강의 색깔로 하이라이팅이 된다.

위 설정을 마친 뒤, shouldComponentUpdate를 사용하지 않고 웹을 동작시켜 보면 setState()가 호출될 때 값이 바뀐 컴포넌트뿐만 아니라 값이 바뀌지 않은 컴포넌트까지 다시 렌더링된다는 걸 확인할 수 있다.

 

shouldComponentUpdate 사용 방법

shouldComponentUpdate(nextProps, nextState, nextContext) 함수 안에서 리렌더링하게 되는 경우에 대해서만 반환값으로 true를 주고, 다른 경우에는 false를 반환하도록 하면 된다.

아래처럼 코드를 작성할 경우. this.state.something의 값이 바뀔 경우에 컴포넌트가 업데이트된다.

shouldComponentUpdate(nextProps, nextState, nextContext) {
  if (this.state.something) !== nextState.something)
    return true;
  return false;
}

 

PureComponent

Component와 PureComponent의 차이는 shouldComponentUpdate()의 유무다. 정확히는 Component의 shouldComponentUpdate() 안에 얕은 비교가 적용된 버전이다. 따라서 복잡한 구조의 state나 props를 가진 경우에는 shouldComponentUpdate() 를 직접 구현하는 게 속편할 수도 있다.

얕은 비교: 숫자나 문자열같은 단순값들은 그들의 값을 비교한다. 객체를 비교할 때에는 그들의 속성을 비교하지 않고 레퍼런스를 비교한다.

 

그럼 모든 Component를 PureComponent로 바꾸는 게 좋지 않냐...

• https://ryublock.tistory.com/38

이 분의 실험을 보자. 결론은 부모 컴포넌트를 PureComponent로 설정하는 것은 낭비라는 것, 어디까지가 부모 컴포넌트인지 모르겠다면 일단 PureComponent로 설정하라는 것이다.

(01/29 추가) 무작정 PureComponent 쓰라는 말은 아니다. 얕은 비교를 하는 PureComponent는 컴포넌트가 복잡한 구조를 가질 때 힘을 읽을 뿐더러 Component에서 shouldComponentUpdate()를 사용하는 것이 더 커스터마이징 가능한 범위가 넓다.