Next.js Pages, 내부에 Component 파일 생성에 관한 가이드
KUKJIN LEE • 9개월 전 작성
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;코드 설명
-
경로 해석: “@/” 별칭으로 사용되며,
jsconfig.json또는tsconfig.json에서 설정 가능합니다. -
코드 구조 및 명명 규칙: Component 이름은 일반적으로 PascalCase를 사용합니다.
Component 파일 구조
-
재사용 가능한 Component: 재사용 가능한 Component는 Components 폴더에 위치 시킵니다.
-
특정 페이지에 한정된 Component: 특정 페이지, 기능에 한정되어 사용되는 컴포넌트는 관련 폴더 내에 위치 시키는 것이 유지보수에 유리합니다.
-
재사용 가능성: Component가 해당 페이지 내에서만 사용되고, 다른 곳에서 재사용 될 가능성이 적다면, 같은 폴더 내 위치시키는 것이 타당할 수 있습니다. 재사용 가능성이 높다면 Components폴더에서 관리합니다.
