[react] shouldComponentUpDate 사용법

1. shouldComponentUpDate를 사용하는 이유

 

리액트는 props, state가 변경되었을 때, 부모 컴포넌트가 렌더링 되었을 때 렌더링 된다.

이러한 특성 때문에 렌더링이 필요하지 않은 자식 컴포넌트가

부모 컴포넌트 때문에 같이 렌더링 되는 불필요한 일이 발생하게 된다.

작은 프로젝트에서는 큰 문제가 되지 않을 수 있으나 프로젝트가 커질수록 불필요한 렌더링은 성능 손실을 야기한다.

 

shouldComponentUpDate를 사용하면 이 점을 해결할 수 있다.

 

 

2. 사용법

 

shouldComponentUpDate는 newProps와 newState를 인자로 받기 때문에

this.props.data와 newProps.data를 이용해서 이전 값과 변경된 값을 알아낼 수 있다.

class HI extends Component{
  shouldComponentUpDate(newProps, newState){
    if(this.props.data === newProps.data){
      return false;
    }
    return ture;
  }
}
  render(){
  
  }

shouldComponentUpDate는 render보다 먼저 실행되고,

리턴 값이 ture면 render를 호출하고, false면 호출하지 않는다.

이전 값과 변경된 값이 같을 경우 리턴 값을 false로 설정하면 불필요한 렌더링을 막을 수 있다.