컴포넌트 가져오기/내보내기

컴포넌트의 마법은 재사용성에 있습니다. 여러 컴포넌트로 구성된 컴포넌트를 생성할 수 있습니다. 그러나 컴포넌트를 점점 중첩하면서 파일을 여러 개로 분리하는 것이 합리적일 때가 많습니다. 이렇게 하면 파일을 쉽게 스캔하고 다른 위치에서 컴포넌트를 재사용할 수 있습니다.

루트 컴포넌트 파일

Your First Component에서 Profile 컴포넌트와 그를 렌더링하는 Gallery 컴포넌트를 만들었습니다.

현재 이들은 이 예시에서 App.js라는 루트 컴포넌트 파일에 위치해 있습니다. Create React App에서는 앱이 src/App.js에 있습니다. 설정에 따라 루트 컴포넌트가 다른 파일에 있을 수도 있습니다. Next.js와 같은 파일 기반 라우팅을 사용하는 프레임워크를 사용하는 경우, 루트 컴포넌트는 각 페이지마다 다를 수 있습니다.

컴포넌트 내보내기와 가져오기

앞으로 랜딩 화면을 변경하여 과학 책 목록을 넣거나 모든 프로필을 다른 곳에 배치하고 싶다면 어떻게 해야 할까요? Gallery와 Profile을 루트 컴포넌트 파일에서 분리하는 것이 합리적입니다. 이렇게 하면 모듈화되어 다른 파일에서 재사용할 수 있게 됩니다. 컴포넌트를 이동하는 방법은 다음과 같습니다.

1. 컴포넌트를 넣을 새로운 JS 파일을 만듭니다.
2. 파일에서 함수 컴포넌트를 내보냅니다 (default 또는 named exports 중 하나를 사용하여).
3. 컴포넌트를 사용할 파일에서 해당 컴포넌트를 가져옵니다 (default 또는 named exports에 해당하는 가져오기 기술을 사용하여).

여기서 Profile과 Gallery가 App.js에서 Gallery.js로 이동되었습니다. 이제 App.js에서 Gallery를 Gallery.js에서 가져오도록 변경할 수 있습니다.

위의 예시에서 이제 두 개의 컴포넌트 파일로 분할되었음을 알 수 있습니다.

1. Gallery.js:
   • 동일한 파일 내에서만 사용되며 내보내지 않는 Profile 컴포넌트를 정의합니다.
   • default export로 Gallery 컴포넌트를 내보냅니다.
2. App.js:
   • Gallery.js로부터 default import로 Gallery를 가져옵니다.
   • 루트 컴포넌트인 App 컴포넌트를 default export로 내보냅니다.

참고 .jsx 파일 확장자를 생략한 파일을 마주칠 수도 있습니다. 예를 들면 다음과 같습니다:

import Gallery from './Gallery';

리액트에서는 './Gallery.js' 또는 './Gallery' 둘 다 작동하지만, 전자는 네이티브 ES 모듈 동작에 더 가깝습니다.

동일한 파일에서 여러 컴포넌트 내보내고 가져오기

갤러리 대신 하나의 프로필만 표시하려면 어떻게 해야 할까요? Profile 컴포넌트도 내보낼 수 있습니다. 그러나 Gallery.js에는 이미 default export가 있고 두 개의 default export는 가질 수 없습니다. 새로운 파일에 default export를 생성하거나 Profile에 대한 named export를 추가할 수 있습니다. 파일에는 하나의 default export만 가질 수 있지만 여러 개의 named export가 있을 수 있습니다!

참고
default와 named export 간의 잠재적인 혼동을 줄이기 위해 일부 팀은 하나의 스타일(default 또는 named)에만 따르거나 하나의 파일에 혼합하지 않도록 선택합니다. 가장 잘 맞는 방식을 사용하십시오!

먼저, named export(기본 키워드 없이)를 사용하여 Gallery.js에서 Profile을 내보냅니다.

export function Profile() {
  // ...
}

그런 다음, 중괄호를 사용하여 Gallery.js에서 App.js로 Profile을 named import로 가져옵니다.

import { Profile } from './Gallery.js';

마지막으로, App 컴포넌트에서 <Profile />을 렌더링합니다.

export default function App() {
  return <Profile />;
}

이제 Gallery.js에는 두 개의 내보내기가 있습니다: Profile을 named export로, Gallery를 default export로 내보냅니다. App.js에서 둘 모두를 가져옵니다. 이 예시에서 <Profile />을 <Gallery />로 편집하고 다시 시도해보세요.

이제 default와 named export를 혼합하여 사용하고 있습니다.

• Gallery.js:
  • Profile 컴포넌트를 Profile이라는 named export로 내보냅니다.
  • Gallery 컴포넌트를 default export로 내보냅니다.
• App.js:
  • Gallery.js에서 named import로 Profile을 Profile이라는 named import으로 가져옵니다.
  • Gallery.js에서 default import로 Gallery를 가져옵니다.
  • 루트 컴포넌트인 App 컴포넌트를 default export로 내보냅니다.

요약

이 페이지에서 다음을 배웠습니다.

• 루트 컴포넌트 파일이 무엇인지
• 컴포넌트를 가져오고 내보내는 방법
• default 및 named import 및 export를 언제 어떻게 사용하는지
• 동일한 파일에서 여러 컴포넌트를 내보내는 방법