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

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

컴포넌트의 이름이나 파일명의 규칙은 어디까지나 팀이나 개인의 스타일에 따라 정해지는 것이므로 정답은 없습니다. 따라서 원하신다면 그렇게 명명하셔도 상관없습니다.

강의에서 이렇게 명명하지 않은 이유는 여러가지 인데요

첫째로는 페이지 라우터에서는 파일의 이름과 경로 자체가 이미 페이지의 역할과 경로를 명확히 설명해주기 때문입니다. 예를 들어, pages/index.tsx는 루트 경로(/)를, pages/search.tsx는 /search 경로를, pages/book/[id].tsx는 /book/:id 경로를 담당합니다. 즉, 파일의 위치와 이름이 이미 라우트를 표현하기 때문에, 내부 함수 이름까지 SearchPage나 BookDetailPage로 구체화하는 것은 중복적인 표현이 됩니다.

또한 Next.js는 내부적으로 페이지를 인식할 때 파일의 기본 내보내기(default export)만 사용하기 때문에, 함수 이름 자체에는 아무런 제약이나 의미가 없습니다. 다시 말해, 함수 이름을 Page로 하든 SearchPage로 하든 실제 동작에는 차이가 없습니다. 이런 이유로 공식 예제나 대부분의 프로젝트에서는 페이지 컴포넌트를 단순히 function Page() 혹은 export default function Page()로 통일하는 방식을 사용합니다. 이렇게 하면 일관성이 유지되고, 파일 경로만 봐도 어떤 페이지인지 쉽게 파악할 수 있어 코드 가독성도 높아집니다.

반면 layout의 경우에는 상황이 다릅니다. layout은 여러 페이지에서 공통으로 사용되거나 중첩되어 적용되기 때문에, RootLayout, DashboardLayout, AuthLayout처럼 명시적인 이름을 붙이는 것이 유지보수에 도움이 됩니다. 그러나 page 컴포넌트는 파일 구조상 고유한 위치를 가지므로, 중복이나 혼동의 여지가 없고 단순히 Page 하나로 통일하는 것이 가장 간결하고 자연스러운 패턴입니다.

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

리액트와 넥스트.js 같이 컴포넌트 기반 프레임워크를 사용하면서 컨벤션은 일관성을 잡아주는 중요한 요소입니다. 질문하신 page 컴포넌트와 관련된 파일 및 네이밍 규칙에 대해 설명드리겠습니다.

왜 Page라는 이름으로 일관되게 사용하는가?

1. 일관성과 유지보수: 프로젝트 전반에서 컴포넌트가 특정한 역할을 한다는 것을 일관성 있게 보여주기 위함입니다. Page는 해당 컴포넌트가 페이지 역할을 한다는 걸 명확히 해주기 때문에 다른 개발자나 팀원이 쉽게 프로젝트 구조를 이해할 수 있습니다.

2. 파일 기반 라우팅과의 조화: 넥스트.js는 파일 기반 라우팅을 지원합니다. 이러한 라우팅 구조와 맞추기 위해 페이지 파일 이름과 컴포넌트 이름도 일관되게 유지하는 것이 도움이 됩니다. 예를 들어 index.tsx 파일 안의 컴포넌트 이름을 IndexPage 대신 Page로 두면, 모든 페이지 파일에서 일관성을 유지하고, 컴포넌트를 좀 더 쉽게 찾고 식별하기 쉽습니다.

3. 단순화된 초기 설정: 넥스트.js의 경우 디렉토리 구조 자체가 라우팅을 나타내는 경우가 많아 파일 이름만 보고도 해당 컴포넌트가 어떤 페이지를 나타내는지 이미 알 수 있는 경우가 많습니다. 따라서 굳이 파일 내부의 컴포넌트 이름을 다르게 지어야 할 필요성이 줄어듭니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 비슷한 질문이 기존에 있던 경험을 참조하면, “컴포넌트,페이지 파일명 기준” 포스트가 도움이 될 수 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.