[React] 리액트 useCallback 사용법

🎯 useCallback 사용법

const memoizedValue = useCallback(() => {
    doSomething(a, b);
}, [a, b]);

const App = () => {
    const [firstName, setFirstName] = useState('철수')
    const [lastName, setLastName] = useState('김')

    // 이름과 성이 바뀔 때마다 풀네임을 return하는 함수를 메모이제이션
    const getfullName = useCallback(() => {
        return `${firstName} ${lastName}`
    }, [firstName, lastName])

    return <>{getfullName()}</>
}

• 함수를 메모이제이션 하기 위해 사용하는 Hook이다.
• 컴포넌트가 재 렌더링 될 때 불필요하게 함수가 다시 생성되는 것을 방지한다.
• useMemo(() => fn, deps)와 useCallback(fn, deps)는 같다. 그냥 개발자의 편의를 위해서 나눠놨다....
• useMemo는 변수를 메모하기 위해서 존재한다면, useCallback은 함수를 메모하기 위해서 존재한다.
• 함수 생성 자체가 오래 걸리는 경우, 함수를 자식 컴포넌트에 props로 넘겨줄 때 useCallback()을 사용하는 것이 좋다.