[React] shouldComponentUpdate, pureComponent, React.memo

React 성능 최적화를 위해 바뀌는 값 외의 component가 rendering 되는 것을 막아야한다.

shouldComponentUpdate

state안의 value값이 변할때만 렌더링하는 예제

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

pureComponent

여러개의 state가 바뀌었는지 안바뀌었는지를 보고 판단해서 shouldComponentUpdate를 자동으로 구현해놓는다.
단, 객체나 배열같은 참조관계가 있는 state들이 있을 경우 판단하기 어렵기 때문에 되도록 state에 객체구조 사용을 지양하는 것이 좋다.

import React, { PureComponent } from 'react';
...
class NumberBaseball extends PureComponent {}

React.memo

Hooks의 경우 React.memo를 사용해 성능최적화를 할 수 있다.

import React, { memo } from 'react';

const Try = memo(({ tryInfo }) => {
    return (
        ...
    )
});

export default Try;