useCallback도 최적화 전문. 함수 재생성 여부 결정

useCallback을 useMeme 대신 사용할 수 있다고 한다. 함수를 재사용해서 렌더링 최적화를 높이는 hook이라 한다.

 

import { useCallback, 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 = useCallback((e) => {
    setNumber(e.target.value);
  }, []); // only create function when it is first rendering

  const onInsert = useCallback(
    (e) => {
      const nextList = list.concat(parseInt(number)); // concat rather than push for efficiency
      setList(nextList);
      setNumber('');
    },
    [number, list]
  ); // create function when number | list is updated

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

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>Register..</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>Average: </b>
        {avg}
      </div>
    </div>
  );
};

export default Average;

useCallback의 두번째 인자가 배열인데 여기에 빈 배열을 넣으면 첫 렌더링 시에만 함수가 만들어지고, 만약 배열 안에 다른 컴포넌트들의 변수를 넣으면 잇풋 내용 바뀔 때마다 함수가 다시 생성된다 한다.