[React] Memoization, useMemo

Memoization

기존에 수행한 연산의 결과값을 저장해두고 동일한 입력이 들어오면 재활용하는 프로그램 기법으로

중복 연산을 피해 애플리케이션의 성능을 최적화 할 수 있다.

 

 

useMemo

메모이제이션된 값을 반환하는 함수

useMemo(() => fn, [deps])

deps 값이 변할 때 () => fn 함수를 실행하고 그 함수의 반환 값을 반환해준다.

deps는 dependency 약어로 의존성을 뜻하며 useMemo가 deps에 의존하고 있다는 것을 말한다.

 

 

---

예제1

import React, { useState, useCallback, useMemo } from "react";

export default function App() {
  const [stateX, setStateX] = useState(0);
  const [stateY, setStateY] = useState(0);

  // useMemo 사용하기
  useMemo(() => {console.log(stateX)}, [stateX]);

  // 버튼 X, Y 
  // X버튼만 stateX값 변화시킴
  return (
    <>
      <button onClick={() => setStateX((curr) => (curr + 1))}> X </button>
      <button onClick={() => setStateY((curr2) => (curr2 + 1))}> Y </button>
    </>
  );
}

  //  X버튼 클릭시 stateX 값 1씩 증가하는데 stateX값이 변하므로
  // useMemo에서 의존성을 가지고 있는 stateX가 변화된 것을 감지하여
  // 지정한 함수가 실행되어 console.log로 stateX값을 출력한다.

  // stateX값이 변할 경우에만 연산을 실행할 수 있도록 
  // useMemo를 사용해 stateX라는 변수에 의존하도록 등록한다.

리렌더링이 발생할 경우 특정 변수가 변할 때만 useMemo에 등록한 함수가 실행되도록 처리하면 불필요한 연산을 하지 않게 된다.