220415 useMemo

useMemo❓

• 성능 최적화를 위하여 연산된 값을 재사용하는 기능을 가진 함수
• react 생태계에서 렌더링 최적화를 위해 사용되는 Hook

• 메모이제이션이란 ❓
  컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술
• 리액트의 메모이제이션에는 특징이 있다
  • 바로 이전의 값만 메모이제이션 한다는 것

    				<Memoized num="{1}" />
        <!-- 직전 elements를 사용 -->
        <Memoized num="{1}" />
        <!-- 새롭게 렌더링 -->
        <Memoized num="{2}" />
        <!-- 새롭게 렌더링 -->
        <Memoized num="{1}" />

• 메모이제이션은 아래 두가지 이유때문에 한다고 볼 수 있다.
  • 비싼 연산을 반복하는 것을 피하여 성능을 향상시킨다
  • 안정된 값 제공

기본 형태

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

• useMemo Hook은 메모이제이션 된 값을 반환한다

예시

import { useState, useMemo } from "react";

const getAverage = (numbers) => {
  console.log("평균값 계산 중...");
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");

  const onChange = (e) => {
    setNumber(e.target.value);
  };
  const onInsert = (e) => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber("");
  };

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균값:</b>
        {avg}
      </div>
    </div>
  );
};
export default Average;

더 알아보기

• React.memo 와 useMemo와의 차이점

  • https://sustainable-dev.tistory.com/137

• React.memo는 컴포넌트를 인자로 받아 컴포넌트를 리턴하고

• useMemo는 값을 리턴하는 Hook이다

참고 자료

• https://sustainable-dev.tistory.com/137
• https://ko.reactjs.org/docs/hooks-reference.html