인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

우선 아래 그림과 같이 typeof getServerSideProps의 타입은 단순한 Function이 아닙니다.

정확히는 () => Promise<{props:{...}}>처럼 props 프로퍼티가 포함된 객체를 비동기적으로 반환하는 함수 타입입니다. 아래 그림으로 확인해보시면 됩니다.

그리고 InferGetServerSideProps는 이 함수 타입을 제네릭 타입 변수로 제공받아서, 이 함수의 반환값 타입 내의 props 타입을 꺼내 추출하는 기능을 합니다. 쉽게 말해 이 함수가 반환하는 props의 타입을 추출한다고 이해하시면 됩니다.

완전히 구체적인 원리에 대해서는 다소 설명드리기가 복잡한데요 ... 그 이유는 InferGetServerSideProps 타입의 구현체가 매우 복잡하기 때문입니다.

다음은 Next.js가 제공하는 InferGetServerSidePropsType 의 구현체입니다. 한번 살펴보시죠

export type InferGetServerSidePropsType<T extends (args: any) => any> = Awaited<Extract<Awaited<ReturnType<T>>, {
    props: any;
}>['props']>;

대략적으로 설명드리자면 다음과 같습니다.

• 이 타입은 (args: any) => any 즉 함수 타입으로 제한된 타입 변수 T를 제공받습니다.

• 반환 값 타입을 Awaited<Extract<Awaited<ReturnType<T>>, {

  props: any;

  }>['props']>로 정의합니다. 이 타입의 의미는 다음과 같습니다.

  • ReturnType<T> : T 함수 타입의 반환값 타입을 추출합니다. 그 결과 Promise<{props: {...}}>가 추출됩니다.

  • Awaited<ReturnType<T>> : 위 타입에서 Promise를 벗깁니다. 그 결과 {props: {...}} 타입이 추출됩니다.

  • Extract<

    Awaited<ReturnType<T>>,

    {props: any;

    }

    >: 위 타입에서 props 프로퍼티의 타입을 추출합니다. 그 결과 T 함수의 반환값 중 props의 타입이 그대로 추출됩니다.

  • Awaited<Extract<

    Awaited<ReturnType<T>>,

    {props: any;

    }

    >>['props']: props 내부의 타입이 Promise일 경우 한번 더 벗겨냅니다.

안녕하세요, 인프런 AI 인턴입니다. 먼재님.

InferGetServerSidePropsType 제네릭에 대한 이해를 돕기 위해 설명을 드리겠습니다. 이 제네릭 타입은 getServerSideProps 함수가 반환하는 props의 타입을 추론하여, 이를 컴포넌트의 props 타입으로 사용할 수 있게 합니다.

InferGetServerSidePropsType의 작동 방식

1. typeof 사용: typeof getServerSideProps는 함수의 타입을 가져옵니다. 이는 함수의 반환 타입을 추론하는데 필수적입니다. getServerSideProps 함수를 선언할 때, 함수는 특정 형식의 객체를 반환해야 하며, 이 형식을 내장 타입인 InferGetServerSidePropsType이 읽어 올 수 있습니다.

2. 제네릭 동작 원리: InferGetServerSidePropsType은 제공된 함수 타입에서 반환되는 객체의 형식을 추론합니다. 이를 통해, 해당 함수가 반환하는 props의 타입을 자동으로 구성할 수 있습니다. 즉, getServerSideProps가 반환하는 객체의 타입을 추론하여 컴포넌트에서 해당 타입을 사용할 수 있게 돕습니다.

   • 예를 들어, getServerSideProps가 { props: { data: string } } 형태로 반환하는 경우, InferGetServerSidePropsType을 통해 컴포넌트는 data를 props로 받을 수 있다고 타입이 정해집니다.
     

3. 타입 안전성: 이를 통해 props 타입이 변경되더라도 자동으로 추론되기 때문에, 타입 추론이 어려운 상황에서도 타입 안전성을 보장할 수 있습니다.

아래는 관련된 질문에 대한 기존 답변 링크입니다:
- InferGetServerSidePropsType 사용 예시와 설명

위 답변이 제네릭 타입을 이해하는 데 도움이 되길 바라며, 추가로 궁금한 점이 있으시면 언제든 질문해 주세요. 🙂

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해 드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.