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

컴포넌트의 마법은 재사용성에 있습니다: 다른 컴포넌트로 구성된 컴포넌트를 만들 수 있습니다. 하지만 더 많은 컴포넌트를 중첩할수록, 종종 이를 다른 파일로 분리하는 것이 합리적입니다. 이렇게 하면 파일을 쉽게 살펴볼 수 있고 컴포넌트를 더 많은 곳에서 재사용할 수 있습니다.

루트 컴포넌트 파일

첫 번째 컴포넌트 만들기에서 Profile컴포넌트와 이를 렌더링하는Gallery컴포넌트를 만들었습니다:

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

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

나중에 랜딩 화면을 변경하여 과학 서적 목록을 배치하려면 어떻게 해야 할까요? 아니면 모든 프로필을 다른 곳에 배치하려면요?Gallery와 Profile를 루트 컴포넌트 파일 밖으로 이동시키는 것이 합리적입니다. 이렇게 하면 더 모듈화되고 다른 파일에서 재사용하기 쉬워집니다. 컴포넌트를 이동시키는 데는 세 단계가 있습니다:

1. 만들기: 컴포넌트를 넣을 새 JS 파일을 만듭니다.
2. 내보내기: 해당 파일에서 함수 컴포넌트를 내보냅니다 (기본또는명명된내보내기 사용).
3. 가져오기: 컴포넌트를 사용할 파일에서 가져옵니다 (기본또는명명된내보내기를 가져오는 해당 기술 사용).

여기서Profile과 Gallery 모두 App.js에서 Gallery.js라는 새 파일로 이동되었습니다. 이제App.js를 변경하여Gallery를 Gallery.js에서 가져올 수 있습니다:

이 예시가 이제 두 개의 컴포넌트 파일로 어떻게 분해되었는지 확인하세요:

1. Gallery.js:
   • 동일 파일 내에서만 사용되고 내보내지지 않는Profile 컴포넌트를 정의합니다.
   • Gallery컴포넌트를기본 내보내기로 내보냅니다.
2. App.js:
   • Gallery를 기본 가져오기로 Gallery.js에서 가져옵니다.
   • 루트 App컴포넌트를기본 내보내기로 내보냅니다.

같은 파일에서 여러 컴포넌트 내보내기 및 가져오기

갤러리가 아닌 하나의Profile만 표시하고 싶다면 어떻게 해야 할까요?Profile컴포넌트도 내보낼 수 있습니다. 하지만Gallery.js에는 이미기본내보내기가 있고,두 개의기본 내보내기를 가질 수는 없습니다. 기본 내보내기가 있는 새 파일을 만들거나,이름 있는내보내기를 추가할 수 있습니다.Profile에 대한파일은 기본 내보내기를 하나만 가질 수 있지만, 이름 있는 내보내기는 여러 개 가질 수 있습니다!

먼저,내보내기Profile를 Gallery.js에서 이름 있는 내보내기로 내보냅니다(default키워드 없이):

그런 다음,명명된 임포트(중괄호 사용)를 통해Profile을 Gallery.js에서App.js로 가져옵니다:

마지막으로,렌더링<Profile />를 App컴포넌트에서 수행합니다:

이제Gallery.js에는 두 개의 내보내기가 있습니다: 기본Gallery내보내기와 명명된Profile내보내기입니다.App.js는 둘 다 가져옵니다. 이 예제에서<Profile />를 <Gallery />로 바꾸고 다시 돌려보세요:

이제 기본 내보내기와 명명된 내보내기를 혼합하여 사용하고 있습니다:

• Gallery.js:
  • 명명된 내보내기Profile으로 Profile 컴포넌트를 내보냅니다.
  • 기본 내보내기로Gallery컴포넌트를내보냅니다.
• App.js:
  • 명명된 임포트Profile으로Gallery.js에서 Profile을 가져옵니다.
  • 기본 임포트로Gallery를 Gallery.js에서 가져옵니다.
  • 기본 내보내기로 루트App컴포넌트를내보냅니다.

요약

이 페이지에서 배운 내용:

• 루트 컴포넌트 파일이 무엇인지
• 컴포넌트를 가져오고 내보내는 방법
• 기본 및 명명된 임포트와 내보내기를 언제, 어떻게 사용하는지
• 동일한 파일에서 여러 컴포넌트를 내보내는 방법