[React] useMemo와 useCallback로 리액트 렌더링 성능 최적화하기(Feat. React.memo)

안녕하세요. 리액트를 다루다 보면 렌더링 성능 최적화에 대한 이슈를 접하기 마련입니다.

리액트에서는 렌더링 성능 최적화에 관한 대표적인 훅으로 useMemo와 useCallback이 있습니다.

 

저는 개인적으로 useMemo와 useCallback이 뭐가 다른지, 어떤 상황에서 써야 렌더링 성능 최적화를 할 수 있을지 굉장히 많이 헷갈렸었는데요~

 

오늘은 useMemo와 useCallback의 차이점에 대해 자세히 알아보고 이 둘의 사용법에 관해서도 간단하게 알아보도록 하겠습니다.

 

 

 

---

 

 

✔️ useMemo

 

useMemo에서 Memo의 의미는 우리가 어떤 생각이 날 때마다 작성하는 메모라는 뜻이 아닙니다.

여기서 Memo라는 건 Memoization을 축약한 Memo라는 뜻입니다.

 

Memoization, 메모이제이션이란 컴퓨터 프로그램이 동일한 연산을 반복해야 할 때 기존에 연산했던 값을 메모리에 저장해 둬서 동일한 계산의 반복 수행을 없애 효율적으로 동작할 수 있게끔 하여 실행 속도를 높이는 기술이라고 해요.

 

리액트에서는 useMemo hook을 사용해서 이전에 연산한 값을 재사용하는 메모이제이션 기술을 적용할 수 있습니다.

useMemo는 메모이제이션된 값을 반환합니다. 

 

 

 

사용 방법은 다음과 같습니다.

const realRate = getComma(rate)

// useMemo 적용
const realRate = useMemo(() => getComma(rate), [rate])

useMemo로 사용하고자 하는 함수를 감싸서 작성합니다.

두 번째 인자는 배열입니다. useEffect를 사용할 때 의존성 배열을 사용하죠? 비슷한 맥락으로 배열에 함수의 의존성 값을 넣어 사용합니다. 

의존성 배열에 있는 값이 변경되었을 경우에만 값을 다시 계산하는 방식입니다.

 

 

 

 

 

어떨 때 사용하면 좋을까요? 이해를 돕기 위해 예시 코드를 만들어 보았습니다~

 

 

 

 

 

 

메시지를 입력할 수 있는 간단한 인풋 창, 전송 버튼이 있습니다.

입력을 하게 되면 리스트 형식으로 아래에 출력이 됩니다.

또한 입력된 리스트들의 개수를 세어 나타내 주는 문장도 함께 있습니다.

 

전체 코드는 다음과 같습니다.

import { useState, useMemo } from "react";

export default function App() {
  const [item, setItem] = useState("");
  const [itemList, setItemList] = useState([]);
  const handleItem = (event) => {
    setItem(event.target.value);
  };
  const handleSubmit = (event) => {
    setItemList([...itemList, item]);
    event.preventDefault();
    setItem("");
  };
  const itemCount = (item) => {
    console.log("item 개수를 셉니다");
    return item.length;
  };
  const len = itemCount(itemList);
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input onChange={handleItem} value={item} />
        <button type="submit">전송</button>
      </form>
      <ol>
        {itemList.map((item, i) => (
          <ul key={i}>{item}</ul>
        ))}
      </ol>
      <p>itemList 개수는 {len}개</p>
    </div>
  );
}

 

여기서 주목해야 할 부분은 itemCount 함수와 이 함수를 사용하는 부분입니다.

 

const itemCount = (item) => {
    console.log("item 개수를 셉니다");
    return item.length;
};
const len = itemCount(itemList);

 

이 상태로라면 콘솔 창에 어떻게 출력되는지 확인해 보겠습니다.

 

입력이 되기 전이라 인풋 창의 value만 변경이 되는데도 itemCount 함수가 실행되면서 콘솔 창에 출력이 됩니다.

 

이런 경우에 useMemo를 사용하여 렌더링최적화를 할 수 있습니다.

 

 

const len = useMemo(() => itemCount(itemList), [itemList]);

 

앞서 설명했던 방식대로 useMemo를 사용한 후, 콘솔 창에는 itemList가 변경되었을 때만 메시지가 출력되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

✔️ useCallback

useCallback은 useMemo와는 약간 다르게 메모이제이션된 콜백을 반환합니다.

쉽게 말해 보자면, useMemo는 값을 연산할 때 사용한다면 useCallback은 메모이제이션을 함수에 적용하고 싶을 때 사용합니다.

 

 

 

사용 방법은 다음과 같습니다.

const callback = () => {
	doSomething(a, b);
}

// useCallback 적용 후
const memoizedCallback = useCallback(() => {
    doSomething(a, b);
}, [a, b]);

위와 같이 함수를 useCallback으로 감싸 주고, 안에서 사용되는 의존성 값들을 배열 안에 작성해 주면 됩니다.

useMemo와 사용법은 비슷하죠?

 

 

useCallback은 보통 이벤트 핸들러 함수나 API를 요청하는 함수를 작성할 때 주로 사용됩니다.

 

리액트 공식 문서에 따르면 하위 컴포넌트가 React.memo() 같은 것으로 최적화되어 있고, 그 하위 컴포넌트에게 callback 함수를 props로 넘길 때 상위 컴포넌트에서 useCallback으로 함수를 선언하는 것이 유용하다고 합니다.

 

 

그 이유는 다음과 같습니다.

 

상위 컴포넌트에서 callback 함수를 재선언한다면, 동일한 함수일지라도 props로 callback 함수를 넘겨 받는 하위 컴포넌트 입장에서는 props가 변경되었다고 인식하게 됩니다. React.memo로 함수형 컴포넌트 자체를 감싼다면 넘겨 받는 props가 변경되지 않았을 때는 상위 컴포넌트가 메모이제이션된 함수형 컴포넌트를 사용하게 되므로, 이전에 렌더링한 결과를 사용할 수 있다고 하네요.

 

 

 

useCallback의 자세한 사용법도 예시 코드로 확인해 봅시다!

 

 

위에서 useMemo의 예시로 들었던 같은 코드를 응용했습니다. 기존 코드에서 itemList의 출력 부분을 따로 ItemList 컴포넌트로 분리해 놓았어요.

 

 

React Developer Tools라는 크롬 익스텐션을 사용해서 렌더링되는 컴포넌트를 확인해 볼 수 있습니다. 확인해 보면, 입력창에 메시지를 치는 것만으로도 그 외의 부분도 같이 리렌더링이 되는 모습을 확인할 수 있어요.

 

이 부분을 React.memo와 useCallback을 사용해서 최적화해 보도록 할게요.

 

 

 

// App.js

import { useState, useMemo } from "react";
import ItemList from "./ItemList";

export default function App() {
  const [item, setItem] = useState("");
  const [itemList, setItemList] = useState([]);
  const handleItem = (event) => {
    setItem(event.target.value);
  };

  const handleSubmit = (event) => {
    setItemList([...itemList, item]);
    event.preventDefault();
    setItem("");
  };
  const itemCount = (item) => {
    console.log("item 개수를 셉니다");
    return item.length;
  };
  const len = useMemo(() => itemCount(itemList), [itemList]);
  const modifyItem = (e) => {
    if (e.target.style.color !== "red") {
      e.target.style.color = "red";
    } else {
      e.target.style.color = "black";
    }
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input onChange={handleItem} value={item} />
        <button type="submit">전송</button>
      </form>
      <ItemList items={itemList} modifyItem={modifyItem} />
      <p>itemList 개수는 {len}개</p>
    </div>
  );
}

ItemList의 li들을 클릭하면 색상을 변경할 수 있도록 modifyItem이라는 메소드를 추가로 구현했습니다. 그리고 이 메소드를 ItemList에게 전달해 주도록 할게요.

 

// ItemList.js

import React from "react";

function ItemList({ items, modifyItem }) {
  return (
    <div>
      <ol>
        {items.map((item, i) => (
          <ul key={i}>
            <p onClick={modifyItem}>{item}</p>
          </ul>
        ))}
      </ol>
    </div>
  );
}

export default React.memo(ItemList);

ItemList에서는 다음과 같이 사용할 수 있습니다. 여기서 React.memo의 사용법은 위 코드에서처럼 export 해 주는 컴포넌트를 감싸주기만 하면 됩니다.

 

 

  const modifyItem = useCallback((e) => {
    if (e.target.style.color !== "red") {
      e.target.style.color = "red";
    } else {
      e.target.style.color = "black";
    }
  }, []);

useCallback의 사용은 다음과 같이 사용하려는 함수를 useCallback으로 감싸 주면 됩니다. 

useMemo에서 의존성 배열을 추가해 준 것과 똑같이 useCallback에서도 사용해 주면 됩니다.

 

 

예시에서는 이벤트에 의존된 함수이기 때문에 의존성 배열에 값을 따로 넣지 않았는데요. 안에서 작동하는 함수가 의존해서 사용되는 값이 있다면 의존성 배열에 추가해 주면 되겠습니다.

 

 

 

입력을 완료하고 전송을 했을 때만 컴포넌트가 렌더링되는 것을 볼 수 있습니다. 불필요한 리렌더링 방지를 할 수 있네요!

 

 

 

---

 

 

 

 

개인적으로 처음 접했을 때 조금 헷갈렸던 useMemo와 useCallback을 정리해 보았습니다. 정리를 하면서, 그리고 어떨 때 사용하는지 자세히 알아보면서 개념에 대해 머릿속에서도 자리가 잡힌 것 같아요. 이 글을 보시는 분들께도 도움이 되었으면 좋겠습니다. ☺️

 

 

 

 

 

🚩 참고

벨로퍼트와 함께하는 모던 리액트

Hooks API Reference