• 참고 강의
  리액트를 수박 겉핥기로만 한 것 같아서 좀 더 이해하면서 리액트를 사용하기 위해 인프런에서 이 강의를 듣는 중이다.

렌더링이 자주 일어나서 성능이 떨어지는 문제를 발견하고 해결하는 방법

state나 props가 바뀌면 렌더링이 된다... 사실 값의 변경보다 그냥 setState가 호출되면 렌더링 되는 것이다.

크롬 개발자 도구에서 Components -> 톱니바퀴 -> Hightlight updates when components render 체크하기

렌더링이 단시간에 많이 일어날수록 초록 노랑 주황 빨강색 테두리가 보인다.
이걸 기준으로 업데이트 될 내용이 없는데 쓸데없이 계속 렌더링이 일어나고 있는 컴포넌트가 있는지 확인할 수 있다. 이런 쓸데없는 렌더링이 쌓여서 성능이 떨어지는 원인이 된다.

필요할 때만 렌더링 하도록 하는 방법

shouldComponentUpdate()

쓸데없는 렌더링을 막으려면 shouldComponentUpdate().
언제 진짜 렌더링이 일어나야 하는지 정할 수 있다.
return true일 경우에만 다시 렌더링 한다.

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

PureComponent

이거 말고 또 다른 방법은 PureComponent!

//import React, {Component} from 'react';
// 위에꺼 대신에...
import React, {PureComponent} from 'react';

PureComponent를 사용할 때는 state의 데이터 구조를 간단하게 하자. 배열 안에 객체 안에 배열... 이런 식으로 복잡한 구조는 PureComponent가 변화를 감지하지 못할 수도 있다. 그래서 컴포넌트를 잘게 쪼개고 그에 맞게 props도 잘게 쪼개는 것이 좋다.

이 두 가지는 클래스형 컴포넌트에서 사용하는 것이다. 그럼 hooks는?

memo

컴포넌트를 memo로 감싸자.

만약 memo를 적용했는데도 계속 렌더링이 일어난다 싶으면 최후의 방법(?)으로 useMemo로 컴포넌트를 감쌀 수도 있다.

import React, {memo} from 'react';

const Header = memo(() => {
 return (
   <div>yay!</div>
 ) 
});
 

특히 가장 밑 단계에 있는 컴포넌트 들은 (가장 하위 자식) PureComponent나 memo를 사용해주는 것이 좋다. 그리고 자식 컴포넌트들이 '모두' PureComponent이거나 memo로 되어있으면 그 부모 컴포넌트도 PureComponent이거나 memo를 사용할 수 있다.

shouldComponentUpdate 또는 PureComponent 그리고 memo는 꼭 쓰자!!