KUKJIN LEE
Posted 5 months ago
Next.js Pages, 내부에 Component 파일 생성에 관한 가이드
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폴더에서 관리합니다.