참고자료
https://velog.io/@velopert/react-hooks#5-usememo

useMemo

• 연산을 최적화 할수 있다.

첫 번째 인수로 전달된 함수의 return 값을 기억(리렌더링 하지 않음)
(두 번째 인수로 전달된 의존성이 변경되기 전까지 기억)

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

const UseMemo = () => {
  const [nickname, setNickname] = useState("");
  const [nicknameLength, setNicknameLength] = useState(0);

  const updateNicknameLength = () => {
    setNicknameLength(nickname.length);
  };
  useEffect(updateNicknameLength, [nickname]);

  const updateNickname = (event) => {
    const nickname = event.target.value;

    setNickname(nickname);
  };

  return (
    <div>
      <input onChange={updateNickname} />
      <label>{nicknameLength}</label>
    </div>
  );
};
export default UseMemo;

nickname 을 변경하면 nicknameLength 를 업데이트하는 컴포넌트 입니다.

useEffect 는 업데이트가 끝난 이후에 작동하기 때문에 한번 더 업데이틑 한다는 이슈가 있다 .

useMemo 사용

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

const UseMemo = () => {
  const [nickname, setNickname] = useState("");
  const nicknameLength = useMemo(() => nickname.length, [nickname]);

  const updateNickname = (event) => {
    const nickname = event.target.value;
    setNickname(nickname);
  };

  return (
    <div>
      <input onChange={updateNickname} />
      <label>{nicknameLength}</label>
    </div>
  );
};

export default UseMemo;

다른예시

import React, { 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 = e => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
  };

  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> {getAverage(list)}
      </div>
    </div>
  );
};

export default Average;

평균값이 잘 나오는것을 볼수 있다.
하지만 console.log 를 찍어보면 이풋 내용이 바뀔 땐 평균 값을 다시 계산할 필요가 없다 .
이렇게 랜더링 할때마다 계산을 하는것을 비효율적이다.

import React, { 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;

userMemo 를 사용하게 되면 list 배열의 내용이 바뀔 때에만 getAverage 함수가 호출된다.