React 성능 최적화

최적화를 하지 않으면 setState를 할 때마다 전체 렌더링이 일어난다.

 

어디어디 렌더링이 일어나는지 확인 하는 방법 : devTool의 reactComponent 탭에서 톱니바퀴 누르고, Highlight updates when components render에 체크!!

 

1) Hooks 에서 : memo

import React, { memo } from 'react';

const Try = memo(( props ) => {

...

});

export default Try;

 

2) Class 에서 : PureComponent, shouldComponenetUpdate

 ① PureComponent

import React, { PureComponent } from 'react';

class Try extends PureComponent {
    constructor(props){
        super(props);

        // constructor 도 함수이기때문에 미세조정 가능.
        // 예를들어

        // const filtered = this.props.filter(() => {
        //     등등
        // })
        // 기본 객체로는 안되는 동작이 있을경우 사용한다.
    }
}

export default Try;

 

② shouldComponenetUpdate

- shouldComponenetUpdate 쓰는게 불편하다하면 편한 방법이 있다. >> pureComponent

- pureComponent : shouldComponenetUpdate 를 자동으로 구현해놓은 것.

- pureComponent는 객체나 배열 등 참조관계가있는것들은 사용이 어렵다.

import React, { Component } from 'react';

class Test extends Component {
    state = {
        counter: 0,
    }

    shouldComponentUpdate(nextProps, nextState, nextContext){
        if(this.state.counter !== nextState.counter){
            return true; // 렌더링해라.
        }
        return false; // 렌더링 하지마라.
    }

    onClick = () => {
        this.setState({});// 값이 바뀌지 않고있는 상황. 렌더링이 될까?
        // 렌더링이 다시 일어난다. setState를 호출할 때 렌더링이 됨.
        
    };

    render() {
        console.log('렌더링', this.state);
        return (
            <div>
                <button onClick={this.onClick}>클릭</button>
            </div>
        )
    }
}

export default Test;