렌더링 속도를 올리기 위한 성능 최적화 방법

송나은·2021년 6월 23일

React

목록 보기

4/9

리액트가 실행될 때 가장 많은 CPU 리소스를 사용하는 것은 렌더링이다.

최초 렌더링 이후 속성값이나 상태값의 이전 이후 값을 비교하고 렌더링이 필요하다고 생각하면 컴포넌트 함수를 호출한다.

새로운 가상 돔을 만들고 이전에 만들었던 가상 돔과 비교해서 변경된 부분을 실제 돔에 반영한다.

1. React.memo

렌더링 결과 재사용하기

React.memo로 감싼 컴포넌트는 속성값 비교 함수가 호출된다.

const MyComponent = (props) => {
  // ...
}

const ifEqual = (prevProps, nextProps) => {
  // true or false
}
React.memo(Mycomponent, isEqual);

이전, 이후 속성값을 매개변수로 받아서 참을 반환하면 렌더링을 멈추고, 거짓을 반환하면 컴포넌트 함수를 실행하여 가상 돔을 업데이트 한다.

React.memo로 감싸지 않은 컴포넌트는 속성값이 변하지 않아도 부모 컴포넌트가 렌더링 될 때마다 자식 컴포넌트도 렌더링된다.

속성값을 불변 객체로 관리하면 단순 비교만으로 컴포넌트 속성값이 변경된 것을 알 수 있기 때문에 렌더링 성능에 큰 도움이 된다.

2. 속성값과 상탯값을 불변 변수로 관리하기

컴포넌트 내부에서 함수나 객체를 정의해서 자식 컴포넌트의 속성값으로 입력하면, 자식 컴포넌트는 변경되지 않은 값에 대해서도 속성값이 변경되었다고 인식한다.

렌더링과 무관하게 항상 같은 값을 가지도록 관리해야 한다.

useCallback 훅이 반환한 함수를 속성값으로 입력하기
변하지 않는 값은 상수 변수로 관리하기
useMemo 훅으로 꼭 필요한 경우에만 반환되는 값이 변경되도록 하기

const discountPrice = () => {
    let needPrice;
    if (0 <= cartPrice && cartPrice < 50000)
      needPrice = { discount: 10, price: 50000 - cartPrice };
    if (50000 <= cartPrice && cartPrice < 100000)
      needPrice = { discount: 13, price: 100000 - cartPrice };
    if (100000 <= cartPrice && cartPrice < 200000)
      needPrice = { discount: 15, price: 200000 - cartPrice };
    if (cartPrice > 200000) needPrice = { discount: 15, price: 10000000000 };
    return needPrice;
  };

  // cartPrice가 변할 때에만 needPrice가 변경되도록 하기!
  const needPrice = useMemo(discountPrice, [cartPrice]);