useMemo

• 함수형 컴포넌트 내부에서 일어나는 연산 최적화 가능
• 렌더링 과정에서 특정 값이 바뀌었을 때만 연산을 실행, 바뀌지 않았다면 이전 결과 재탕함

import React, { useState } from "react";

const getAverage = (num) => {
  if (num.length === 0) return 0;
  const sum = num.reduce((a, b) => a + b);
  return sum / num.length;
};

export 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("");
  };

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      {list.map((value, index) => (
        <p key={index}>{value}</p>
      ))}
      <div>평균:{getAverage(list)}</div>
    </div>
  );
};

이 경우 숫자를 등록할 때뿐만 아니라 input의 값이 변경되어도(리렌더링) getAverage함수가 실행되면서 낭비됨.

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

const getAverage = (num) => {
  console.log("average 실행중");
  if (num.length === 0) return 0;
  const sum = num.reduce((a, b) => a + b);
  return sum / num.length;
};

export 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>
      {list.map((value, index) => (
        <p key={index}>{value}</p>
      ))}
      <div>평균:{avg}</div>
    </div>
  );
};

• 첫 번째 파라미터 : 어떻게 정의할지 연산하는 함수
• 두 번째 파라미터 : deps 배열

  deps 배열 내 값이 변경되면 우리가 등록한 함수를 호출해서 값을 연산(값이 변경되지 않았다면 이전 값 재사용)