[React] 최적화 / 함수 재사용 / memoization / useMemo

Memoization

이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고, 기억 해두 었던 데이터

를 반환 시키게 하는 방법

useMemo

export default function App() {
  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  const getAnalysis = () => {
    console.log("분석 시작");
    const highCount = data.filter((it) => it >= 7).length;
    const lowCount = data.length - highCount;
    const highRatio = (highCount / data.length) * 100;

    return { highCount, lowCount, highRatio };
  };

  const { highCount, lowCount, highRatio } = getAnalysis();

  return (
    //
    <div className="App">
      <div>전체 데이터 개수 : {data.length}</div>
      <div>높은 점수 개수 : {highCount}</div>
      <div>높은 점수 개수 : {lowCount}</div>
      <div>높은 점수 개수 : {highRatio}</div>
    </div>
  );
}

React 에서 컴포넌트가 reRendering 될 때마다 함수가 실행되면 불 필요한 연산이 매번 발생하게 된다.

위에서, data 의 길이가 변경될 때만 getAnalysis 함수를 호출 하도록 하기 위해 useMemo라는 함수를 사용한다. 

import { useMemo } from "react";

export default function App() {
  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  const getAnalysis = useMemo(() => {
    console.log("분석 시작");
    const highCount = data.filter((it) => it >= 7).length;
    const lowCount = data.length - highCount;
    const highRatio = (highCount / data.length) * 100;

    return { highCount, lowCount, highRatio };
  }, [data.length]);

  const { highCount, lowCount, highRatio } = getAnalysis;

  return (
    //
    <div className="App">
      <div>전체 데이터 개수 : {data.length}</div>
      <div>높은 점수 개수 : {highCount}</div>
      <div>높은 점수 개수 : {lowCount}</div>
      <div>높은 점수 개수 : {highRatio}</div>
    </div>
  );
}

최적화 하고 싶은 함수를 useMemo 함수로 감싸게 되면 해당 함수는 두번째 매개변수로 들어간 dependency array가 변경이 되었을 때만 호출되게 된다.

이처럼 useMemo를 사용하게 되면 함수를 값처럼 사용해서 연산 최적화를 할 수 있다.

참고

https://espania.tistory.com/366

[React] 최적화 / 컴포넌트 재사용 / React.memo

https://codesandbox.io/s/hopeful-alex-gw951h?file=/src/App.js:0-692 

hopeful-alex-gw951h - CodeSandbox