useCallback()을 사용하는 이유
Last modified at:
useCallback은 메모이제이션 된 콜백 함수를 반환하는 React hook 입니다.
prop으로 callback을 전달받는 자식 컴포넌트의 성능을 최적화하려는 경우에 유용합니다.
import { useCallback } from 'react';
function ParentComponent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, [setCount]);
return <ChildComponent onClick={handleClick} />;
}
function ChildComponent({ onClick }) {
return <button onClick={onClick}>Click me</button>;
}
useCallback이 없을 경우 handleClick은 부모 컴포넌트가 렌더링될 때마다 새로운 참조를 가집니다.
전달받는 prop에서 변경사항이 생겼으므로 자식 컴포넌트 역시 재 렌더링됩니다.
useCallback으로 handleClick을 래핑하고 함수 종속성을 setCount로 설정함으로써 setCount가 변경될 시 handleClick이 다시 생성되도록 합니다.
이것은 부모 컴포넌트가 렌더링될 때마다가 아닌 setCount가 변경될 때 자식 컴포넌트가 재 렌더링됨을 의미합니다.
그러면 이렇게 좋은 useCallback 항상 쓰는 것이 좋을까요?
useCallback은 불필요한 재 렌더링 횟수를 줄여 성능을 최적화하지만 앱의 메모리 사용량을 늘릴 수 있습니다.
일반적으로 재 렌더링으로 느려지는 컴포넌트이며 prop으로 받는 callback 함수가 매번 새로운 참조인 경우 사용해야 합니다.
references
