메모이제이션된 함수를 반환하는 함수
컴포넌트가 리렌더링 될때마다 컴포넌트 내부에 있는 함수가 리렌더링 되는데, 이를 막아주기 위해 useCallback을 사용해 주면 유용하다. 즉, 불필요한 리렌더링을 막아주는 셈이다.
useCallback이 하는 일
언제쓸까?
function App() {
const [name, setName] = useState('');
const onSave = useCallback(() => {
console.log(name);
}, [name]);
return (
<div className="App">
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<Profile onSave={onSave} />
</div>
);
useCallback 절대 쓰지말것!
setState나 dispatch를 단순 호출할 경우. 불필요한 연산을 더하는 셈이므로 절대 쓰지말자!
메모이제이션된 값을 반환하는 함수
cf .메모이제이션 - 컴퓨터 프로그램이 동일한 계산을 반복해야할때, 이전에 계산한 값을 메모리에 저장해 놓음으로써 동일하나 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술