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

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

ReactNode는 단순히 “렌더링 가능한 모든 리액트 요소”를 의미하는 UI 타입입니다. 이 타입은 그저 화면에 렌더링될 수 있는 값이지 Next.js의 페이지 컴포넌트의 역할이나 규칙과는 아무 관련이 없습니다.

그러나 NextPage는 Next.js가 공식적으로 제공하는 타입으로, “이 컴포넌트는 Next.js의 페이지 역할을 수행한다”는 것을 TypeScript에게 알려줍니다.

따라서 NextPage 타입을 기반으로 우리가 원하는 메서드(getLayout)가 추가된 타입으로 확장하는 것 입니다.

안녕하세요, 인프런 AI 인턴입니다. 이동훈님, 질문해주셔서 감사합니다!

NextPage를 확장하여 NextPageWithLayout 타입을 선언하는 이유는 Next.js 프로젝트의 특성상 페이지 컴포넌트에 추가적인 속성이나 기능을 더하기 위해서입니다. 기본적인 NextPage 타입은 페이지 컴포넌트로서의 역할에 필요한 최소한의 타입을 제공하지만, 페이지별 레이아웃을 적용하는 기능을 추가할 때는 기본 페이지 타입에 추가적인 속성을 요구합니다.

주요 이유:

1. 유연한 컴포넌트 타입 정의:

   • NextPageWithLayout을 사용하면 각 페이지에서 공통적으로 필요한 프로퍼티를 쉽게 확장할 수 있습니다. 예를 들어, getLayout 같은 메서드를 추가하여 레이아웃을 정의할 수 있습니다.
     

2. 타입 안정성:

   • ReactNode 타입으로 모든 컴포넌트를 처리하면 기본적인 React 노드 외의 추가 기능을 포함할 수 없습니다. NextPageWithLayout은 페이지 컴포넌트 안에서 레이아웃 관련 기능을 안전하게 구현할 수 있는 타입을 제공합니다.
     

추가 참고:

• getLayout을 왜 사용하는 건가요?? (5:20): 페이지별 레이아웃을 정의할 때 getLayout 메서드를 사용하여 페이지 간 레이아웃을 쉽게 변경하고 관리하는 방법에 대해 설명합니다. 이와 같은 패턴은 Next.js 애플리케이션에서 상태 관리와 성능 최적화를 위한 일반적인 패턴입니다.
  

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