[React] shouldComponentUpdate

생활코딩 React강의를 따라하던 중,

TOC의 변화가 없는데, 계속 TOC가 render이 되는 모습을 콘솔로 확인할 수 있었다.

 

이러한 것을 해결하기 위해서 

shouldComponentUpdate(nextProps, nextState)를 사용한다.

 

shouldComponentUpdate()를 사용하면 state 또는 props의 변화가 컴포넌트의 출력 결과에 영향을 미치는 여부를 React가 알 수 있다.

 

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

기본값은 true!

 

만약 false라면? 갱신되어도 렌더링 발생x

 

shouldComponentUpdate 메소드는 성능을 최적화하기 위한 것! 

 

 

 

강의를 들으면서 따라하던 도중,

shouldComponentUpdate()가 false였기 때문에

Toc가 수정이되어도, false로 수정이 되지 않았다.

 

수정 전 코드

  shouldComponentUpdate(newProps, newState){
    console.log("Toc render shouldComponentUpdate", newProps.data, this.props.data);
    return false;
  }

 

 

 

수정 후 코드

  shouldComponentUpdate(newProps, newState){
    console.log("Toc render shouldComponentUpdate", newProps.data, this.props.data);
    if(this.props.data === newProps.data){
      return false;
    }
    return true;
  }