이 연습에서는 useCallback 함수와 관련된 문제를 살펴보겠습니다.

export const Buttons = (props: { id: string }) => {
  const onClick = useCallback<string>(
    (buttonName) => {
      console.log(props.id, buttonName);
    },
    [props.id],
  );

  type test = Expect<Equal<typeof onClick, (buttonName: string) => void>>;

  return (
    <div>
      <button onClick={() => onClick("A")}>A</button>
      <button onClick={() => onClick("B")}>B</button>
      <button onClick={() => onClick("C")}>C</button>
    </div>
  );
};

테스트에서 볼 수 있듯이 버튼 이름은 문자열이어야 하며 void를 반환해야 합니다.

하지만 현재 buttonName은 암시적으로 any로 타입지정되어 있습니다.

Challenge

useCallback을 입력할 때 무슨일이 일어나는지 파악하고 테스트가 예상대로 통과하도록 코드를 업데이트 하는 것입니다.

Have TypeScript Infer the Callback Function Type

타입스크립트에서 콜백 함수 타입 유추하기

이전과 마찬가지로 CMD + Click 으로 콜백을 사용하는 방법부터 살펴보겠습니다.

Looking at useCallback

//inside node_modules/@types/react/index.d.ts

function useCallback<T extends Function>(callback: T, deps: DependencyList): T;

useCallback은 함수 T와 종속성 목록을 받고 궁극적으로 사용자가 전달한 함수를 반환한다는 것을 알 수 있습니다.

따라서 useCallback 의 타입인수는 함수여야 한다는 것을 알 수 있습니다.

Fixing the Error

연습의 시작점 코드에서는 문자열이 이름에 사용될 것처럼 보이기 때문에 문자열로 useCallback 을 호출하고 있습니다.