<aside> 🔥 공식 문서

</aside>

<aside> 🔥 useCallback?

useMemo와 상당히 비슷한 Hook으로 메모이제이션된 콜백을 반환한다.

dependency가 변경되었을 때만 변경된다.

dependency가 비어있을 경우 처음 렌더링 되는 경우에만 변경된다.

</aside>

<aside> 🔥 useCallback 예시

앞서 작성해봤던 평균구하기에서

onChange함수나 onInsert함수는 컴포넌트가 리렌더링 될때마다 새로 만들어진 함수를 사용하게 된다.

컴포넌트의 렌더링이 자주 발생하거나 렌더링해야할 컴포넌트 개수가 많아지면 최적화 해줘야한다.

onChange는 dependency를 빈 배열로 지정해 처음 렌더링 될때만 생성되도록 한다.

onInsert는 number 혹은 list가 바뀔 때만 함수를 생성한다.

주의할 점은 onInsert는 number와 list를 조회해서 nextList를 생성하기 때문에

dependency에 꼭 number와 list를 넣어줘야한다.

import { useState, useMemo, useCallback } 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);
  }, []); // 컴포넌트가 처음 렌더링될 때만 함수 생성
  
  const onInsert = useCallback(() => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber("");
  }, [number, list]); // number 혹은 list가 바뀌었을 때만 함수 생성

  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;

</aside>