이 연습에서는 useMemo의 기능을 이해하기 위해 useMemo를 살펴보겠습니다.

여기에는 useEffect와 useCallback에서 본 것과 유사하게 배열을 반환하는 함수와 종속성 배열을 받는 useMemo 함수가 있습니다.

export const Component = () => {
  const autoGeneratedIds = useMemo<() => string[]>(() => {
    // generate 100 random string uuid's
    return Array.from({ length: 100 }, () =>
      Math.random().toString(36).substr(2, 9)
    );
  }, []);

  type test = Expect<Equal<typeof autoGeneratedIds, string[]>>;
};

이 코드의 목표는 100개의 무작위 UUID 문자열을 생성하고 컴포넌트가 시작될 때 이 작업이 한번만 수행되도록 하는 것입니다.

하지만 문자열 배열을 반환하는 대신 문자열 배열을 반환하는 ‘함수’를 반환합니다.

Challenge

useMemo의 타입 시그니쳐를 자세히 살펴보고 실제 API를 타입 측면에서 이해하여 문제를 조사하는 것이 과제입니다.

발견한 내용을 바탕으로 코드를 업데이트하여 테스트가 예상대로 통과되도록 합니다.

Specify or Infer useMemo's Return Type

useMemo의 반환 타입 지정 또는 추론

Fixing useMemo Typing Issues

이 연습의 시작 코드에서는 문자열 배열을 타입 인수로 반환하는 함수를 useMemo에 전달하고 있습니다. 이것이 useCallback 으로 수행해야 하는 작업이지만 이 상황에서는 올바르지 않습니다.

const autoGeneratedIds = useMemo<() => string[]>(() => {
  ...

Understanding useMemo's Typing

CMD + Click 을 사용하여 useMemo의 데피니션을 살펴보면, 매개 변수가 없는 팩토리 함수가 T 타입을 반환하는 것을 볼 수 있습니다.

function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;