🔍 useMemo

잦은 리렌더링은 앱의 성능에 영향을 끼치기때문에 이러한 문제를 방지하기위한(렌더링 최적화) Hook으로, useCallback과 useMemo가 이에 해당된다.

useMemo는 특정 값을 재사용하고자 할 때 사용하는 Hook이다.

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

위의 예시는useMemo사용의 기본 구조로, 두 번째 인자인 의존성이 변경되었을때만 다시 함수를 호출해 계산한다.

import { useMemo } from "react";

function Calculator({value}){

	const result = useMemo(() => calculate(value), [value]);

	return 
  <>
      <div>
      {result}
      </div>
  </>;
}

위의 예시는 props로 받은 value값을 calculate 함수에 인자로 넘겨서 result 값을 구한 후에 <div> element로 출력하고 있는 코드이다.

만약value값이 지속적으로 바뀌지 않는다고 가정했을 때, calculate 함수를 계속 호출할 필요없이 useMemo Hook을 사용해 calculate을 감싸준다면, 이전의 구축된 렌더링과 새로 구축되는 렌더링을 비교해 value 값이 동일할 경우, 이전 렌더링의 value값을 그대로 재활용할 수 있다.(메모제이션(Memoization) 개념과 밀접한 관계가 있다.)

⭐ 메모이제이션(Memoization)?
기존에 수행한 연산의 결과값을 메모리에 저장해두고, 동일한 입력이 들어오면 재활용하는 프로그래밍 기법으로, 중복 연산을 줄여 앱의 성능을 최적화할 수 있다.

🔥 실습 예시

// css 생략
import React, { useState, useMemo } from "react";
import "./styles.css";
import { add } from "./add";

export default function App() {
  const [name, setName] = useState("");
  const [val1, setVal1] = useState(0);
  const [val2, setVal2] = useState(0);
  
  // useMemo사용해 최적화
  const answer = useMemo(()=>add(val1, val2),[val1, val2]);
  // 최적화되지 않은 코드
  //const answer = add(val1, val2);

  return (
    <div>
      <input
        className="name-input"
        placeholder="이름을 입력해주세요"
        value={name}
        type="text"
        onChange={(e) => setName(e.target.value)}
      />
      <input
        className="value-input"
        placeholder="숫자를 입력해주세요"
        value={val1}
        type="number"
        onChange={(e) => setVal1(Number(e.target.value))}
      />
      <input
        className="value-input"
        placeholder="숫자를 입력해주세요"
        value={val2}
        type="number"
        onChange={(e) => setVal2(Number(e.target.value))}
      />
      <div>{answer}</div>
    </div>
  );
}

// add.js
export const add = (num1, num2) => {
  console.log("숫자가 들어옵니다.");
  return Number(num1) + Number(num2);
};

위의 컴포넌트에서 실제로 연산 로직에 영향을 주는 값은 val1, val2이므로, 이름 상태가 변할 때는 add함수를 불필요하게 호출할 필요가 없다.

따라서, useMemo를 사용해 이름을 입력할 때는 add 함수를 호출하지 않도록 작성된 코드이다.

Reference:

코드스테이츠

https://ko.reactjs.org/docs/hooks-reference.html#usememo