useCallback

• 렌더링 성능 최적화 시 사용
• useMemo와 비슷함
• 이전 예제에서 onChange, onInsert 함수의 경우, 컴포넌트가 리렌더링될 때마다 새로 생성됨

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

const getAverage = (num) => {
  console.log("average 실행중");
  if (num.length === 0) return 0;
  const sum = num.reduce((a, b) => a + b);
  return sum / num.length;
};

export const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");

  const onChange = useCallback((e) => {
    setNumber(e.target.value);
  },[]);
  const onInsert = useCallback((e) => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber("");
  },[number, list]);

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

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      {list.map((value, index) => (
        <p key={index}>{value}</p>
      ))}
      <div>평균:{avg}</div>
    </div>
  );
};

• 첫 번째 파라미터 : 생성하고자 하는 함수
• 두 번째 파라미터 : 배열 - 어떤 값이 바뀔 때 함수를 실행할지에 대한 배열
  1 .onChange의 빈 배열 : 컴포넌트가 렌더링될 때 최초 한 번만 함수 생성
  2 .onInsert의 [number, list] : input 내용이 바뀌거나 새로운 값이 추가될 때마다 함수 생성

함수 내부에서 상태값에 의존할 때 반드시 두 번째 인자에 배열을 포함해야함

useMemo ? useCallback?

useCallback(()=>{
	console.log('hi');
}, []);

useMemo(()=>{
	const foo = () => {
    	console.log('hi')
    }
    return foo;
}, [])

• 둘은 같은 코드임
• useMemo : 숫자, 문자열, 객체 재사용 시
• useCallback : 함수 재사용 시