useCallback()은 함수, useMemo()는 값? 정말 그걸로 끝인가?
...정말 그걸로 끝인가? 메모이제이션하는 대상만 다르고 내부 로직은 똑같은 걸까? 함수를 메모이제이션하니까, 값을 메모이제이션하니까, 내부 로직이 다르지는 않을까?
일단 공식 문서는 똑같다고 한다
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).
useCallback(fn, deps)은 useMemo(() => fn, deps)와 같습니다.
당연하다.
그래도 정확히 알고 싶었다.
아니 진짜 똑같네
export function useCallback<T>(
callback: T,
deps: Array<mixed> | void | null,
): T {
return useMemo(() => callback, deps);
}
TypeScript
복사
function useMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T {
currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
workInProgressHook = createWorkInProgressHook();
const nextDeps = deps === undefined ? null : deps;
if (workInProgressHook !== null) {
const prevState = workInProgressHook.memoizedState;
if (prevState !== null) {
if (nextDeps !== null) {
const prevDeps = prevState[1];
if (areHookInputsEqual(nextDeps, prevDeps)) {
return prevState[0];
}
}
}
}
if (__DEV__) {
isInHookUserCodeInDev = true;
}
const nextValue = nextCreate();
if (__DEV__) {
isInHookUserCodeInDev = false;
}
workInProgressHook.memoizedState = [nextValue, nextDeps];
return nextValue;
}
TypeScript
복사
useCallback()가 내부적으로 useMemo()를 사용하고 있었다. 더 이상 의심할 여지가 없다...