[React]Hooks - useCallback

useCallback

useCallback은 useMemo와 비슷한 함수입니다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용합니다. useCallback을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있습니다.

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

const getAverage = (numbers) => {
  console.log("Loading ...");
  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]);

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

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

export default Average;

useCallback과 useMemo

아래의 두 코드는 완전히 똑같은 코드입니다. useCallback은 결국 useMemo로 함수를 반환하는 상황에서 더 편하게 사용할 수 있는 Hook입니다.

• useCallback - 함수를 재사용할 때 사용

useCallback(() => {
	console.log("Hello, World!");
}, [])

• useMemo - 숫자, 문자열, 객체처럼 일반 값을 재사용할 때 사용

useMemo(() => {
	const fn = () => {
      console.log("Hello, World!");
    };
    return fn;
}, [])