React 최적화 useMemo

이전 글에 이어서 이번에는 useMemo를 소개해 드리겠습니다.

 

 

개념

---

공식문서입니다.

문서에서 보면 알 수 있듯 메모이제이션값을 반환해 줍니다.

memoization이란 반복되는 결과값을 저장해서 다음에 같은 결과가 나올 때 빨리 실행하는 코딩 기법입니다.

 

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

형태를 위와 같습니다.

useEffect와 동일하게 첫 번째 인자로 콜백 함수를 받고 두 번째 인자로 배열을 받습니다.

배열 안에 있는 값이 변경될 때마다 함수가 렌더링 됩니다.

 

 

예시

---

// App.jsx
function App() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  const [c, setC] = useState(0);

  return (
    <div>
      <button onClick={() => setA(a+1)}>a {a}</button>
      <button onClick={() => setB(b+1)}>b {b}</button>
      <button onClick={() => setC(c+1)}>c {c}</button>
      <Children a={a} b={b} c={c} />
    </div>
  );
}

App.js에 a, b, c 라는 int가 있고 버튼을 클릭할 때마다 증가합니다.

각 변수를 Children 자식컴포넌트에 props로 넘깁니다.

 

// Children.jsx
const plusAB = (a, b) => {
    let count = 0;
    for(let i=0;i<2000000000;i++){count++;}
    return a + b;
}
const Children = ({a, b, c}) => {
    const ab = plusAB(a, b);

    return(<div>{ab}</div>)
};

Children.jsx를 보면 렌더링 될 때마다 plusAB함수가 실행됩니다.

a 혹은 b값이 변경되면 plusAB가 실행되는 것이 맞지만 c값이 변경될 때는 함수가 실행될 필요가 없습니다.

 

이럴 때 useMemo를 사용합니다.

const plusAB = (a, b) => {
    let count = 0;
    for(let i=0;i<2000000000;i++){count++;}
    console.timeEnd("forLoop");
}
const Children = ({a, b, c}) => {
    const ab = useMemo(() => plusAB(a, b), [a, b]);

    return(<div>{ab}</div>)
};

위와 같이 useMemo를 감싸면 a와 b가 변경될 때만 plusAB가 실행됩니다.

 

프로젝트를 진행하면서 useMemo를 모든 곳에 사용하면 오히려 좋지 않습니다.

공식문서 콜백함수 이름이 computeExpensiveValue이듯 복잡한 로직이 들어갈 때가 아니면 굳이 사용하지 않아도 괜찮습니다.