[react] shouldComponentUpdate

성능을 향상시키기 위해서 

컴포넌트의 render 함수가 실행될지 안될지를 개발자가 결정할 수 있도록 하는

특수한 약속의 함수 shouldComponentUpdate 가 있다.

 

 

shouldComponentUpdate(newProps, newState){
        console.log('=====toc render shouldComponentUpdate'
                    ,newProps.data, this.props.data);
        return false;
    }

이 코드는 해당 컴포넌트의 render함수 전에 작성한다.

newProps.data 로는 바뀐값을 알 수 있고, this.props.data 를 통해서 현재 값을 알 수 있다는 것이다.

 

shouldComponentUpdate

• 함수의 결과값이 true 면 render함수가 호출되고, false면 호출되지 않음
• 새롭게 바뀐 값과, 이전값을 알 수 있음
• render함수 호출을 조작할 수 있음

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

이렇게 결과값을 조작하여 render함수를 호출 할 수 있다. 

 

여기서 .push와 .concat을 구분하여 써야하는 중요성이 나오게 되는데, 

https://ojm1484.tistory.com/47#comment13337976

[개발일기] .concat

만약 App.js(부모 컴포넌트)에서 배열 값을 .push로 줬다면 원본의 값이 바뀌기 때문에 이전값과 변경값이 둘 다 같아지게 된다.

그래서 렌더를 계속 할 수밖에 없는 상태가 되는 것이다. (큰 프로젝트를 하게 된다면 성능상의 이슈가 생길 수 있음.)

 

아무튼 shouldComponentUpdate라는 함수는 render함수의 호출을 결정할 수 있는 함수라는 것!!