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
로 함수를 반환하는 상황에서 더 편하게 사용할 수 있는 Hook입니다.
useCallback(() => {
console.log("Hello, World!");
}, [])
useMemo(() => {
const fn = () => {
console.log("Hello, World!");
};
return fn;
}, [])