5.6.2 shouldComponentUpdate()

다음으로 살펴볼 shouldComponentUpdate() 이벤트는 렌더링 직전에 실행된다. 렌더링은 새로운 속성이나 상태가 전달된 후에 이뤄진다. shouldComponentUpdate() 이벤트는 초기 렌더링 시점이나 forceUpdate() 호출 시에는 실행되지 않는다.

shouldComponentUpdate()에서 false를 반환하도록 구현하면 React가 다시 렌더링되지 않도록 할 수 있다. 변경된 부분이 없고, 불필요한 성능 저하를 피하고자 할 때(컴포넌트 수백 개를 다뤄야 할 때) 유용한 방법이다. 예를 들어 다음 코드에서는 + 연산자를 이용해서 불 값인 isVisible을 숫자로 변환한 후에 opacity 값과 비교한다.

shouldComponentUpdate(newProps, newState) {
  return this.state.opacity !== + newProps.isVisible
}

 

isVisible이 false이고 this.state.opacity는 0이면 render()를 실행하지 않는다. 또한, componentWillUpdate()와 componentDidUpdate()도 호출하지 않는다. 즉, 컴포넌트의 재렌더링을 제어할 수 있다.