React 성능향상

요즘은 예전에 학습했던 리액트에 대해 다시 학습중이다.
학원에서 리액트를 배울때 "우리나라에서 가장 있기있는" 이라는 명목하에 제대로 이해하지 못하고 코드만 따라쳤었는데 하나하나 차근차근 배우는 요즘 리액트가 신기하기도 하고 배우는게 재밌어진다.
예전에는 스트레스만 받았었는데 알고 배우는게 이렇게 중요하구나

💫 shouldComponentUpdate

불필요한 랜더링을 막아주어 성능을 최적화한다.

1.react dev tool을 이용하여 랜더링되는 부분을 알아보자

아래 highlight updates when components render부분에 체크를 하면 랜더링 될때마다 하이라이트 표시가되어 어느 부분이 불필요하게 랜더링되고 있는지 알 수 있다.
하이라이트 색이 초록색에서 빨간색으로 점차 변하면 문제가 생기고 있다는 뜻이다.

2.shouldComponentUpdate 사용하기

아래와 같은 테스트 페이지를 만들어준다.

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

export default Test;

아래와 같이 shouldComponentUpdate를 해주면 변화가 있는 컴포넌트만 랜더링 되어 불필요한 랜더링을 막아주게 된다.

💫 memo

부모 컴포넌트가 리랜더링되면 자식 컴포넌트도 리랜더링 되는 현상을 막아준다.

예시코드

import React, { memo } from "react";

const Try = memo(({ tryInfo }) => {
    return (
        <li>
            <div>{tryInfo.try}</div>
            <div>{tryInfo.result}</div>
        </li>
    )
});
Try.displayName = 'Try';


export default Try;

Try.displayName은 memo를 적용하면 개발자도구에서 이름이 이상하게 변하는데 다시 Try로 바꿔주기 위해 넣어준다.