Next.js Pages, 내부에 Component 파일 생성에 관한 가이드

clock icon

posted 1 month ago

Next.js 프로젝트에서 컴포넌트를 임포트하고 사용하는 방식은 표준적인 접근법으로, 다른 파일 또는 컴포넌트를 import 문을 통해 가져와 현재 컴포넌트에서 사용하는 것을 포함합니다.

 

일반적으로 Components 폴더에 생성 된 Component와 달리, Pages에 생성 된 Component에 대한 게시글입니다.

 

ex) IslandCalander Component import in Page

import IslandCalander from "@/app/(root)/loa/calendar/IslandCalander";

const Page = () => {
  return (
    <div>
      <IslandCalander />
    </div>
  );
};

export default Page;

코드 설명

  1. 경로 해석: “@/” 별칭으로 사용되며, jsconfig.json 또는 tsconfig.json에서 설정 가능합니다.

  2. 코드 구조 및 명명 규칙: Component 이름은 일반적으로 PascalCase를 사용합니다.

 

Component 파일 구조

  • 재사용 가능한 Component: 재사용 가능한 Component는 Components 폴더에 위치 시킵니다.

  • 특정 페이지에 한정된 Component: 특정 페이지, 기능에 한정되어 사용되는 컴포넌트는 관련 폴더 내에 위치 시키는 것이 유지보수에 유리합니다.

  • 재사용 가능성: Component가 해당 페이지 내에서만 사용되고, 다른 곳에서 재사용 될 가능성이 적다면, 같은 폴더 내 위치시키는 것이 타당할 수 있습니다. 재사용 가능성이 높다면 Components폴더에서 관리합니다.

Top Questions