component 의 가장 중요한 역할은 재사용성에 있다. 따라서 컴포넌트들을 각각의 파일로 분리하여 재사용하기 쉽도록 관리한다.
01. The root component file
root component는 모든 컴포넌트 계층의 최상위에 존재하는 컴포넌트의 시작점 이다.
02. Exporting and importing a component
각각의 분리된 파일에 정의된 컴포넌트를 사용하기 위해서는 컴포넌트를 내보내고, 들여오는 과정이 필요하다.
한 파일에서 여러 컴포넌트들을 내보내는 경우, defulat export와 named export를 사용할 수 있다.
// Gallery.js
export function Profile() {
// ...
}
export default function Gallery() {
return(
<div>
<h1>Gallery</h1>
<Profile/>
<Profile/>
</div>
)
}
// App.js
import Gallery, {Profile} from './Gallery.js';