[React] 성능 최적화:: React.memo를 사용한 컴포넌트 Memoization

리액트에서 성능을 최적화 할 수 있는 방법에는 여러 가지가 있다. 이번엔 그 중에서도 리액트 컴포넌트를 메모리에 저장하여(memoization) 불필요한 리렌더를 방지하는 방법에 대해 알아보겠다.

Memoization이란

메모이제이션은 연산의 실행 결과를 캐시에 저장해두고 동일한 연산이 반복될 때, 입력값이 전과 같다면 캐시된 결과를 반환하고 다르다면 연산을 재수행하여 새로운 결과를 반환하는 최적화 기법이다.

리액트 컴포넌트의 Memoization

기본적으로 리액트는

1. 내부 state나 전달받은 props가 변경될 때
2. 부모 컴포넌트가 리렌더 될 때
3. shouldComponentUpdate() 메서드의 리턴값 혹은 React.memo 의 두번째 인자로 전달한 비교 함수(함수형 컴포넌트)의 리턴값이 true일 때
4. 강제 리렌더를 할 때

state와 props의 업데이트 여부를 Object.is() 메서드를 사용해 얕은 비교(데이터가 객체, 배열, 함수와 같은 참조형인 경우 데이터 자체가 아닌, 데이터가 저장된 메모리 주소값을 비교)하여 컴포넌트 리렌더링을 한다.

항목을 클릭하면 취소선이 그어지는 간단한 To-Do 리스트를 예로 들어보자.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [list, setList] = useState([
    {
      id: 1,
      title: "item 1",
      checked: true
    },
    {
      id: 2,
      title: "item 2",
      checked: false
    },
    {
      id: 3,
      title: "item 3",
      checked: false
    }
  ]);

  const handleClick = (id) => {
    setList(
      list.map((item) =>
        item.id === id ? { ...item, checked: !item.checked } : item
      )
    );
  };

  return <List list={list} handleClick={handleClick} />;
}

function List({ list, handleClick }) {
  return (
    <ul>
      {list.map((item) => (
        <Item key={item.id} item={item} handleClick={handleClick} />
      ))}
    </ul>
  );
}

function Item({ item, handleClick }) {
  console.log("re-render", item.title);

  return (
    <li
      className={item.checked ? "checked" : undefined}
      onClick={() => handleClick(item.id)}
    >
      {item.title}
    </li>
  );
}

아직은 메모이제이션을 위한 처리를 하지 않았기 때문에 첫 번째 항목을 클릭했음에도 아래처럼 모든 항목들이 리렌더링 되어 콘솔에 찍히는 상태이다.

이는 최상위 부모 App 컴포넌트에서 Item 컴포넌트의 상태를 관리하고 있기 때문이다. 첫 번째 항목의 데이터가 변경된 것은 부모 컴포넌트의 state가 변경된 것이기 때문에, 부모 컴포넌트가 리렌더 됨에 따라 모든 자식 Item 컴포넌트들이 리렌더링 되는 것이다. 이처럼 state나 props가 변하지 않았음에도 리렌더링 되는 것은 조금 불필요해 보인다. 만약 예시와 같이 아주 작은 규모가 아니라 항목이 수 천, 수 만 개가 되는 무거운 어플리케이션이라면 성능에도 영향을 끼칠 것이다.

컴포넌트에 메모이제이션을 적용하면 이런 불필요한 렌더링과 그로 인한 성능 저하를 개선할 수 있다. 복습하자면, 메모이제이션은 동일한 연산이 반복될 때 입력값이 전과 같다면 이전의 결과를 재반환하는 기술이다. 함수형 컴포넌트에서는 이를 React.memo와 useCallback() Hook을 사용해 구현할 수 있다.

React.memo

React.memo는 컴포넌트의 렌더링 결과를 메모이제이션하는 컴포넌트로 변환해주는 고차 컴포넌트(HOC)이다. 변환된 컴포넌트는 전달받은 props의 얕은 비교를 통해, 전과 같다면 이전 렌더링 결과를 재사용한다.

아래처럼 React.memo의 첫 번째 인자로 메모이제이션 하고 싶은 컴포넌트를 전달한다. 만약 얕은 비교가 아닌 다른 비교를 원한다면, 두 번째 인자로 별도로 작성한 비교 함수를 전달한다.

function ComponentToBeMemoized(props) {
    // 렌더링
}

function areEqual(prevProps, nextProps) {
    // 비교 로직
}

export default React.memo(ComponentToBeMemoized, areEqual);

areEqual 함수는 props들이 같으면 true를 반환하고, 다르면 false를 반환한다. 비교 함수의 리턴값이 true일 때는 props가 변하지 않았다고 판단하여 이전 결과를 재사용하도록 하는 방식이다.

반면에 클래스형 컴포넌트의 shouldComponentUpdate() 메서드는 props들이 같으면 false를 반환하고, 다르면 true를 반환한다. 따라서 리턴값이 true 일 때 props가 달라 새롭게 연산해야 한다고 판단하여 리렌더링 하는 방식이다. (함수형 컴포넌트와 정반대의 방식이니 유의할 것☠)

그럼 이제 Item 컴포넌트에 적용해보자. 컴포넌트를 선언하면서 동시에 React.memo를 적용하고 싶다면 아래처럼 함수 표현식으로 작성한다.

const Item = React.memo(({ item, handleClick }) => {
  console.log("re-render", item.title);

  return (
    <li
      className={item.checked ? "checked" : undefined}
      onClick={() => handleClick(item.id)}
    >
      {item.title}
    </li>
  );
});

하지만 아직도 여전히 모든 항목들이 리렌더링 된다?! 정상이다. 그 원인은 함수의 특징에 있다.

함수형 컴포넌트가 리렌더링 된다는 건 해당 함수가 다시 호출됐다는 뜻이다. 그리고 함수는 호출되어 실행될 때마다 내부에 선언된 변수들과 함수들 또한 다시 선언하여 새로운 메모리 주소를 할당하는 특징을 가진다. 인스턴스가 생성된 이후에는 리렌더링이 되어도 멤버 변수나 메서드들이 재선언 되지 않는 클래스와는 비교된다.

이러한 원리로 부모 App 컴포넌트가 리렌더링 될 때마다 내부의 handleClick 함수가 재선언되기 때문에, Item 컴포넌트들은 항상 새로운 참조값을 갖는 handleClick props를 전달받게 되고, 메모이제이션 해둔 이전 렌더링 결과를 재사용하지 못하는 것이다. 여기서 우리는 React.memo를 정확하게 작동시키기 위해서는 내부 함수 또한 메모이제이션을 해줘야 함을 알 수 있다. 그리고 그것은 useCallback() Hook을 사용하여 구현할 수 있다.

⚠ React.memo는 props 변화에만 영향을 받는다. 만약 React.memo로 감싸진 컴포넌트 내부에서 useState, useReducer, useContext Hook을 사용한다면, state나 context가 변할 때마다 위에 언급한 리렌더 조건(1. 내부 state나 전달받은 props가 변경될 때)에 부합하여 다시 렌더링 될 것이다.

useCallback()

useCallback() Hook은 메모이제이션된 콜백함수를 반환하는 리액트의 내장 API이다. 첫 번째 인자로 함수를, 두 번째 인자로 의존성 배열을 전달받는다.

import React, { useCallback } from 'react';

const memoizedCallback = useCallback(() => {
    // Do something with a
}, [a]);

의존성이 변경됐을 때만 변경된 의존성을 참조하는 함수가 새롭게 선언되어 반환될 것이고, 그렇지 않다면 메모이제이션 된 함수가 재사용될 것이다.

const handleClick = useCallback(
  (id) => {
    setList(
      list.map((item) =>
        item.id === id ? { ...item, checked: !item.checked } : item
      )
    );
  },
  [list]
);

하지만 아직 함정이 하나 더 남아있다.

위의 코드를 보면 의존성 배열로 list를 전달하고 있다. list는 각 항목을 누를 때마다 매번 바뀌는 데이터이다. 따라서 handleClick 함수도 매번 새로운 메모리 주소에 할당될 것이고, 결국 이전과 같이 모든 Item 컴포넌트들이 리렌더 될 것이다. 이 문제는 아래와 같이 함수형 업데이트로 해결할 수 있다.

const handleClick = useCallback((id) => {
  setList((list) =>
    list.map((item) =>
      item.id === id ? { ...item, checked: !item.checked } : item
    )
  );
}, []);

업데이트 함수는 인자로 함수를 전달할 수도 있는데, 이 함수는 자동적으로 최신 상태를 인자로 전달받는다. 따라서 useCallback() 의존성 배열에 list를 추가하지 않아도 가장 최신 list를 참조하는 handleClick 함수를 메모이제이션 할 수 있게 된다.

최종 코드이다. 성공적으로 Item 컴포넌트의 메모이제이션이 되고 있다. 성공적😎👍