[리액트를 다루는 기술] useMemo를 활용하여 불필요한 연산 줄이기

기존 코드

import React, {useState} from 'react'

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

export default function Average() {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');

  function onChange(e) {
    setNumber(e.target.value);
  }

  function onInsert(e) {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
  }

  return (
    <>
      <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)}
        {/* number가 바뀔 때마다 리렌더링 되어 함수가 실행 */}
      </div>
    </>
  )
}

useMemo로 변경한 코드

import React, {useState, useMemo} from 'react'

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

export default function Average() {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState('');

  function onChange(e) {
    setNumber(e.target.value);
  }

  function onInsert(e) {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
  }

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

  return (
    <>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => <li key={index}>{value}</li>)}
      </ul>
      <div>
        <b>평균값: </b>{avg}
        {/* 리렌더링 되더라도 useMemo가 있어 list가 변할 때만 실행 */}
      </div>
    </>
  )
}

• useMemo로 쓸모 없는 연산을 줄여 성능을 최적화
  • 첫 매개변수: 콜백 함수로 실행할 함수 넣기
  • 두 번째 매개변수: useEffect와 같이 배열 안 변수가 변할 때만 작동