[React] Hooks - useCallback

useCallback

함수를 메모이제이션 하기 위한 함수이며 useMemo와 상당히 비슷하다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하고 주로 자식 컴포넌트에게 props로 넘기는 콜백함수를 감싸는 데에 쓰인다.

✔ 메모이제이션
메모리 어딘가에 저장해두고 두고두고 써먹겠다

• useCallback의 인자
  • 첫번째 인자 : 실행할 콜백함수
  • 두번째 인자 : dependency array(의존성 배열)

const myNewFunction = useCallback(() => {
 console.log("hey!", need_update);
}, [need_update]);

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); // numbers라는 배열의 각 요소에 reducer 함수인 ( a + b )를 실행
  return sum / numbers.length;
};

const AverageuseMemo = () => {
  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)); // input으로 입력 받은 number의 값들을 정수로 반환 후 기존 배열인 list( [] )에 합침
    setList(NextList);
    setNumber("");
  }, [number, list]); // number 혹은 list가 바뀌었을 때만 함수 생성

  const avg = useMemo(() => getAverage(list), [list]); // useMemo(() => {실행할 함수}, 변화감지변수);

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => ( 
          <li key={index}>{value}</li> // 배열 list의 index를 통해 value 값 출력
        ))}
      </ul>
      <div>
        <b>평균값:</b> {avg}
      </div>
    </div>
  );
};
export default AverageuseMemo;

useCallback(생성하고 싶은 함수, 배열)
특히, 배열은 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야함
함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두번째 파라미터 안에 포함시켜야 함

• useCallback(e => {
  setNumber(e.target.value);
  }, [] );
  ➡ 비어 있는 배열 : 렌더링될 때 만들었던 함수를 계속해서 재사용 , 기존의 값을 조회하지 않고 바로 설정만

• useCallback (e => {
  const NextList = list.concat(parseInt(number));
  setList(NextList);
  setNumber("");
  }, [number, list]);
  ➡ number, list : 인풋 내용이 바뀌거나 새로운 항목이 추가될 때 새로 만들어진 함수를 사용, 기존의 number와 list를 조회해서 nextList를 생성하기 때문에 배열안에 꼭 number와 list를 넣어야함