NextJS에서 컴포넌트 임포트하기

데이터 파일뿐만 아니라, 일반 React에서 작업할 때 익숙한 방식으로 컴포넌트도 임포트할 수 있습니다. 어떻게 작동하는지 살펴보겠습니다.

먼저 몇 가지 규칙을 정합시다. 알다시피, src/app 폴더에는 사이트 페이지가 위치합니다. 자식 컴포넌트는 src/comp 폴더에 배치해 봅시다.

이제 자식 컴포넌트를 어떤 페이지에 연결해 보겠습니다. 다음과 같은 페이지가 있다고 가정합시다:

export default function Test() {
	return <>
		<h1>Test</h1>
	</>;
}

다음과 같은 자식 컴포넌트가 있다고 가정합시다:

export default function Child() {
	return <p>
		child
	</p>;
}

이제 자식 컴포넌트를 우리 페이지로 임포트해 보겠습니다:

import Child from '@/comp/child/child.jsx';

export default function Test() {
	return <>
		<h1>Test</h1>
	</>;
}

임포트한 컴포넌트를 삽입해 보겠습니다. 컴포넌트 변수명을 태그 이름으로 사용합니다:

import Child from '@/comp/child/child.jsx';

export default function Test() {
	return <>
		<h1>Test</h1>
		<Child />
	</>;
}

여러 개의 자식 컴포넌트를 생성해 보세요. 그 컴포넌트들을 여러분의 페이지로 임포트해 보세요.