이 글은 useCallback의 타입을 파헤치는 과정에서 나온 의문점을 해결하는 과정을 다룬 글입니다.
댓글은 언제나 환영입니다! 😘 재밌게 읽어주세요! 😉

🚀 시작

저는 진행하고 있는 프로젝트에서 typescript와 react를 사용하고 있습니다. 그리고 함수 컴포넌트와 Hooks를 조합해서 개발하고 있었습니다. 그렇게 개발하던 중에 저는 제가 자주 사용하는 useCallback, useState와 같은 Hooks코드들을 직접 찾아보게 됐습니다.

🕵️‍♂️ 의문의 시작

먼저 react 레포지토리에 들어가서 폴더 구조를 파악해봤습니다.
react 최상위 폴더는 다음과 같이 구성되어 있습니다. (폴더를 제외한 파일들은 포함하지 않았습니다.)

// react Hooks소스의 위치
📦 react
└─ packages
   └─ react
      └─ src
         └─ ReactHooks.js

제가 가장 궁금했던 useCallback의 타입은 이렇게 정의되어있었습니다. (소스 코드)

export function useCallback<T>(
  callback: T,
  deps: Array<mixed> | void | null,
): T {
  const dispatcher = resolveDispatcher();
  return dispatcher.useCallback(callback, deps);
}

ℹ️ 정보
react는 정적 타이핑을 위해서 typescript가 아닌 flow를 사용하고 있습니다.

코드를 보자마자 가장 먼저 보였던 것은 매개변수 deps의 타입이었습니다. 저는 flow 문법을 전혀 모르지만 코드로만 봤을 때 deps에는 배열과 null, void(undefined로 추정됨) 타입들이 허용되는 것으로 보였습니다.

그런데 제 기억에 의하면 프로젝트에서 useCallback의 매개변수 deps의 인자로 배열이외의 값을 넣었을 때 타입 에러가 발생했습니다. 이 점이 이상하다고 생각했던 저는 두 모듈이 실제로 타입이 다른지 확인해보기 위해 typescript 프로젝트에 react의 타입을 제공해주는 @types/react 모듈이 있는 레포지토리로 찾아갔습니다.

@types/react 모듈의 소스 코드는 DefinitelyTyped 레포지토리에 포함되어 있는데 이 레포지토리는 모든 typescript 타이핑을 제공하는 패키지들을 소유하고 있습니다.

소스 코드를 확인해본 결과, DefinitelyTyped에서 정의된 useCallback 타입 정의는 실제로 react 라이브러리 내부에서 정의된 타입과 달랐습니다. (소스 코드)

 // TODO (TypeScript 3.0): <T extends (...args: never[]) => unknown>
 function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;
 /**

DefinetlyTyped에서 정의한 useEffect의 deps의 타입은 react에서 정의한 것과 다르게 배열만 허용하는 타입을 가지고 있었습니다.

🏌 헛스윙

처음 이 부분을 발견했을 때 flow로 작성된 타입을 typescript로 옮기면서 발생한 휴먼 에러라고 생각해서 DefinitelyTyped에 이슈로 올렸습니다. 하지만 해당 이슈에서 다른 컨트리뷰터들과 얘기를 나눠본 결과, 결론은 "문제없다"로 나게 됐습니다.

이유는 DefinetlyTyped에서 정의된 useCallback의 타입 상단에 적힌 주석에서 알 수 있었습니다.

// I made 'inputs' required here and in useMemo as there's no point to memoizing without the memoization key
// useCallback(X) is identical to just using X, useMemo(() => Y) is identical to just using Y.
/**
 * `useCallback` will return a memoized version of the callback that only changes if one of the `inputs`
 * has changed.
 *
 * @version 16.8.0
 * @see https://reactjs.org/docs/hooks-reference.html#usecallback
 */

useCallback과 useMemo를 메모이제이션하지 않고 사용할 이유는 없기 때문에 DefinetlyTyped에서는 deps 매개변수의 타입을 배열로 설정했습니다.

DefinetlyTyped에서 정의된 타입은 타겟 라이브러리의 타입을 지정해주는 편의를 위한 모듈이기 때문에 기존 라이브러리의 타입을 그대로 따라가야 한다고 생각했었습니다.
하지만 실제로 라이브러리 사용자의 입장에서 타입을 정의하게 되면 기존 라이브러리에서 정의된 타입을 그대로 따르지 않고 새로운 타입을 지정할 수 있음을 알게 됐습니다.

2020년 6월 초에 알게 됐고 정리를 시작했던 포스트였는데 ⌨️
다른 포스트 쓰려고 들어왔다가 이제야 마무리,,, 🤦‍♂️