React docs beta 한글 번역 : Importing and Exporting Components - 컴포넌트 가져오기 및 내보내기

UI 묘사 : 컴포넌트 가져오기 및 내보내기

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

 

학습 내용은 다음과 같습니다.

• 루트 컴포넌트 파일이란 무엇인가요?
• 컴포넌트 가져오기 및 내보내기 방법
• 기본 및 명명된 가져오기 및 내보내기를 사용하는 경우
• 하나의 파일에서 여러 컴포넌트를 가져오고 내보내는 방법
• 컴포넌트를 여러 파일로 분리하는 방법

 

root 컴포넌트 파일 

첫 번째 컴포넌트에서 프로필 컴포넌트와 이를 렌더링하는 갤러리 컴포넌트를 만들었습니다:

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

 

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

나중에 랜딩 화면을 변경하여 과학 도서 목록을 넣으려면 어떻게 해야 할까요? 혹은, 모든 프로필을 다른 곳에 배치하려면 어떻게 해야 할까요? 

갤러리와 프로필을 root 컴포넌트 파일 밖으로 옮기는 것이 좋습니다. 이렇게 하면 다른 파일에서 더 모듈화되고 재사용할 수 있습니다. 컴포넌트는 세 단계로 이동할 수 있습니다:

 

1. 컴포넌트를 넣을 새 JS 파일을 만듭니다.
2. 해당 파일에서 함수 컴포넌트를 내보냅니다(export default 또는 명명된 export 사용).
3. 컴포넌트를 사용할 파일에서 컴포넌트를 가져옵니다(export defulat 나, 다른이름으로 명명된 export를 가져올 때 해당 기술(import)를 사용).

 

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

 

import Gallery from './Gallery.js';

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

 

이제 이 예제가 두 개의 컴포넌트 파일로 어떻게 나뉘는지 확인하세요:

 

Gallery.js:

동일한 파일 내에서만 사용되며 export 하지 않는 프로필 컴포넌트를 정의합니다.
갤러리 컴포넌트를 export default로 내보냅니다.

App.js:

Gallery.js에서 갤러리를 import 로 가져옵니다. root App 컴포넌트를 export default로 내보냅니다.

 

참고

다음과 같이 파일 확장자가 .js로 끝나는 파일이 있을 수 있습니다:

 import Gallery from './Gallery';

./Gallery.js' 또는 './Gallery'는 React와 함께 작동하지만, 전자가 네이티브 ES 모듈의 작동 방식에 더 가깝습니다.

 

Deep Dive - 기본 내보내기와 지정된 내보내기
자바스크립트로 값을 내보내는 방법에는 기본 내보내기와 명명된 내보내기의 두 가지 주요 방법이 있습니다. 지금까지 예제에서는 기본 내보내기만 사용했습니다. 하지만 동일한 파일에서 둘 중 하나 또는 둘 다를 사용할 수 있습니다. 파일에는 기본 내보내기가 하나만 있을 수 있지만, 명명된 내보내기는 원하는 만큼 많이 있을 수 있습니다.

 

컴포넌트를 내보내는 방식에 따라 컴포넌트를 가져오는 방식이 결정됩니다. 기본 내보내기를 네임드 내보내기와 같은 방식으로 가져오려고 하면 오류가 발생합니다! 이 차트는 추적하는 데 도움이 될 수 있습니다:

 

 

기본 가져오기를 작성할 때 가져오기 뒤에 원하는 이름을 넣을 수 있습니다. 예를 들어 './button.js'에서 바나나 가져오기를 작성해도 동일한 기본 내보내기가 제공됩니다. 반면에 명명된 가져오기를 사용하면 양쪽에서 이름이 일치해야 합니다. 이것이 바로 네임드 임포트라고 불리는 이유입니다!

파일에서 하나의 컴포넌트만 내보내는 경우에는 기본 내보내기를 사용하고, 여러 컴포넌트와 값을 내보내는 경우에는 명명된 내보내기를 사용하는 경우가 많습니다. 어떤 코딩 스타일을 선호하든 항상 컴포넌트 함수와 그 함수가 포함된 파일에 의미 있는 이름을 지정하세요. export default () => {}와 같이 이름이 없는 컴포넌트는 디버깅을 어렵게 만들 수 있으므로 사용하지 않는 것이 좋습니다.

 

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

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

기본 내보내기와 명명된 내보내기 사이의 잠재적인 혼동을 줄이기 위해 일부 팀에서는 한 가지 스타일(기본 또는 명명된)만 고수하거나 단일 파일에 혼합하지 않도록 선택합니다. 이는 선호도의 문제입니다. 자신에게 가장 적합한 방식을 선택하세요!

먼저, 명명된 내보내기(기본 키워드 없음)를 사용하여 Gallery.js에서 프로필을 내보냅니다:

 

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

 

그런 다음 중괄호로 묶은 명명된 가져오기를 사용하여 Gallery.js에서 App.js로 프로필을 가져옵니다:

 

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

 

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

 

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

 

이제 Gallery.js에는 기본 갤러리 내보내기와 명명된 프로필 내보내기의 두 가지 내보내기가 포함됩니다. App.js는 이 두 가지를 모두 가져옵니다. 이 예제에서 <Profile />을 <Gallery />로 편집했다가 다시 편집해 보세요:

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

 

Gallery.js:

Profile 컴포넌트를 Profile이라는 명명된 내보내기로 내보냅니다. 갤러리 컴포넌트를 기본 내보내기로 내보냅니다.

App.js:

Gallery.js에서 Profile이라는 명명된 가져오기로 프로필을 가져옵니다. Gallery.js에서 Gallery를 기본 가져오기로 가져옵니다.
루트 App 컴포넌트를 기본 내보내기로 내보냅니다.

 

요약

이 페이지에서 학습한 내용입니다:

• 루트 컴포넌트 파일이란 무엇인가요?
• 컴포넌트 가져오기 및 내보내기 방법
• 기본 및 명명된 가져오기 및 내보내기를 사용하는 시기와 방법
• 동일한 파일에서 여러 컴포넌트를 내보내는 방법

 

(도전과제 생략)

발표요약)
1. 루트 컴포넌트는 기본적으로 App.js 이지만, 이름을 변경할 수 있다.
2. 루트컴포넌트에서 하위의 컴포넌트들을 조합해 화면을 그린다.
3. export는 모듈 내보내기 import는 모듈 가져오기. 
4. index.js 파일을 하나 만들어서 사용할 모듈들을 모두 import해준다음, export로 객체로 묶어 내보낼 수 있다.

import Test1 from '../Test1.tsx'
import Test2 from '../Test2.tsx'
import Test3 from '../Test3.tsx'

export {Test1, Test2, Test3}