<aside> 🔥 공식 문서

</aside>

<aside> 🔥 Memoization?

컴퓨터 프로그램이 동일한 계산을 반복할 때, 이전에 계산한 값을 메모리에 저장함으로써

동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술.

</aside>

<aside> 🔥 useMemo?

메모이제이션 값을 반환한다.

dependency가 변경되었을때만 메모이제이션된 값만 다시 계산한다.

최적화 기법 중 하나로 모든 렌더링 시에 고비용 계산을 방지하게 해준다.

</aside>

<aside> 🔥 useMemo 예시

getAverage 함수가 list가 변경될 때만 호출되도록 useMemo를 사용할 수 있다.

import React, { useMemo, useState } 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 = () => {
    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;

</aside>