React - useMemo

Big Jay·2022년 9월 8일

React useMemo

React

목록 보기

9/10

"생성(create)"함수와 그것의 의존성 값의 배열을 전달한다. useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산한다. 이 최적화는 모든 렌더링시 고비용 계산을 방지하게 해준다.

메모이제이션(memoization)
이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술
- 참조: 위키피디아

useMemo

함수형 컴포넌트의 렌더링은 component 함수를 호출하고 모든 내부 변수 초기화의 순서를 갖는다.

function add(){
	return 348696234 * 573248522;
}

function Component(){
  // value 변수는 렌더링 떄마다 초기화하여 add()를 매번 호출한다.
	const value = add()
}
export defalut Component;

만약 내부 변수에 복잡한 일을 처리하는 함수가 할당 되어 있다면 렌더링 할 때마다 이 일을 반복해야 하니 비효율 적이므로 이때 useMemo를 사용한다.

const value = useMemo(()=> {
	return add();
},[의존성])

예제

import { useMemo, useState } from "react";

const hardCalculate = (number) => {
  console.log("어려운 계산");
  for (let i = 0; i < 9999999999; i++) {}
  return number + 10000;
};

const easyCalculate = (number) => {
  console.log("쉬운 계산");
  return number + 1;
};

export default function App() {
  const [hardNumber, setHardNumber] = useState(1);
  const [easyNumber, setEasyNumber] = useState(1);

  const hardSum = useMemo(()=> {
    return hardCalculate(hardNumber)
  }, [hardNumber]);
  const easySum = easyCalculate(easyNumber);

  return (
    <div className="App">
      <h3>어려운 계산기</h3>
      <input
        type="number"
        value={hardNumber}
        onChange={(e) => setHardNumber(parseInt(e.target.value))}
      />
      <span> + 10000 = {hardSum}</span>
      <h3>쉬운 계산기</h3>
      <input
        type="number"
        value={easyNumber}
        onChange={(e) => setEasyNumber(parseInt(e.target.value))}
      />
      <span> + 1 = {easySum}</span>
    </div>
  );
}