[리액트를 다루는 기술] useCallback으로 렌더링 시 성능 최적화

import React, {useCallback, useMemo, 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('');

  const onChange = useCallback((e) => {
    setNumber(e.target.value);
  }, []) // 처음 렌더링 될 때만 함수 생성

  const onInsert = useCallback(() => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber('');
  }, [number, list]) // number나 list 바뀔 때만 함수 생성

  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}
      </div>
    </>
  )
}

• useCallback 등장 배경
  • 함수는 재 렌더링 시 값이 변하지 않아도 자동 생성
  • 렌더링이 많거나 함수의 종류가 많으면 성능 저하
  • 성능 향상을 위해 useCallback 사용
• useCallback 매개변수
  • 첫 매개변수: 실행할 callback 함수
  • 두 번째 매개변수: [ ]로 변화를 인지할 값 넣기