💡 useCallback() 은?
리액트 Hook 중 하나로 렌데링 최적화를 위함 이다.
useEffect 나 useMemo처럼 의존성 배열을 받는다.
사용방법
import React, { useCallback } from "react";
useCallback(() =>
{ callback 함수 }, [] );
두번 째 인자인 deps(의존성 배열, dependency array) 에 변화가 일어나면
메모이제이션(memoization) 된 콜백함수가 반환된다.
useMemo() 와 memoization 된 것을 반환한다는 점은 동일하지만,
🕹 useMemo() 는 함수의 '값'을 반환하고
(=> 이전의 결과값을 재사용 하는데 용이)
🕹 useCallback() 은 함수를 반환한다.
(=> 함수가 재생성되어 렌더링 되는 것을 방지하기 위해 사용)
그런데 두 가지 문제가 발생!
[] 값을 비워두면,
데이터를 날려버리고 새로운 데이터만 저장하게 되거나
const onCreate = useCallback(
(author, content) => {
const newItem = {
author,
content,
id: dataId.current,
};
dataId.current += 1;
setData([newItem, ...data});
}, []); // 기존의 데이터가 날아가고 새로운 데이터만 저장
[data] 로 두면,
최신 데이터 값을 참고할 수 없기 때문에 새로고침을 할 때마다 렌더가 된다.
const onCreate = useCallback(
(author, content) => {
const newItem = {
author,
content,
id: dataId.current,
};
dataId.current += 1;
setData([newItem, ...data});
}, [data]); // 새로고침을 할 때마다 리-렌더
데이터의 값이 최신으로 변경되고 변경되었을 때만 렌더링 되도록 구현하고 싶다면,
이럴 때 사용하는 것이 바로 함수형 업데이트 이다.
💡 함수형 업데이트의 사용
setState에 값 대신 함수를 전달하는 것을
함수형 업데이트라고 한다.
setState의 최신 정보를 인자를 통해 확인이 가능하므로
deps를 비워두게 되더라도([ ])
setState를 동기적으로 사용 할 수 있다.
const onCreate = useCallback(
(author, content) => {
const newItem = {
author,
content,
id: dataId.current,
};
dataId.current += 1;
setData((data) => [newItem, ...data});
}, []); // setState (여기서 setData) 를 동기적으로 사용가