[Describing the UI] Importing and Exporting Components | 컴포넌트 불러오기와 내보내기

컴포넌트의 마법은 재사용성에 있어요. 여러분은 다른 컴포넌트들로 구성된 컴포넌트를 생성할 수 있어요. 그러나 컴포넌트를 중첩하면 할수록 다른 파일로 그들을 분리하는 것이 좋아요. 파일을 분리하는 것은 코드를 스캔하기 쉽고 많은 곳에서 컴포넌트를 재사용하도록 만들어줘요.

 

이 페이지에서는

    - 루트 컴포넌트 파일이 무엇인지
    - 컴포넌트를 어떻게 불러오고(임포트하고) 내보내는지(익스포트하는지)
    - 디폴트(default)와 이름이 있는 불러오기와 내보내기는 각각 언제 사용하는지
    - 어떻게 한 파일에서 여러 개의 컴포넌트를 불러오고 내보내는지
    - 어떻게 컴포넌트를 여러개의 파일로 분리하는지

를 알아볼 거예요.

---

The root component file | 루트 컴포넌트 파일

여러분의 첫 컴포넌트에서 아래와 같이 렌더링 해주는 Profile 컴포넌트와 Gallery 컴포넌트를 만들었어요.

 

 

이 컴포넌트들은 지금 App.js라는 루트 컴포넌트 파일에 있어요. 여러분의 설정에 의해 루트 컴포넌트는 다른 파일이 될 수도 있어요. 만약 넥스트(Next.js)와 같이 파일 기반 라우트를 사용하는 프레임워크를 사용한다면 루트 컴포넌트는 각 페이지마다 다를 거예요.

---

Exporting and importing a component | 컴포넌트 내보내고 불러오기

만약 여러분이 언젠가 랜딩 페이지를 바꾸고 그곳에 과학 서적의 목록을 넣고 싶다면 어떨까요? 또는 모든 프로필을 다른 어딘가에 넣고 싶다면 어떨까요? Gallery와 Profile을 루트 컴포넌트 파일 밖으로 옮기는 것이 합리적이에요. 그렇게하면 이 컴포넌트들은 더 모듈식이 되고 다른 파일에서의 재사용성이 높아져요. 아래 세 단계를 통해 컴포넌트를 옮길 수 있어요.

1. 컴포넌트를 넣기 위한 새로운 JS 파일을 만드세요.
2. 디폴트와 이름이 있는 내보내기를 사용하여 파일에서 함수 컴포넌트를 내보내세요.
3. 디폴트와 이름이 있는 내보내기로 추출된 컴포넌트를 불러오는 방법을 사용하여 컴포넌트를 사용할 파일에서 불러오세요.

이 예시에서 Profile과 Gallery 컴포넌트는 모두 App.js에서 나와 Gallery.js라는 새로운 파일로 이동했어요. 이제 App.js를 Gallery.js에서 Gallery를 불러도록 바꾸세요.

 

 

이 예시가 이제 두개의 컴포넌트 파일로 어떻게 분리되었는지 주목하세요.

1. Gallery.js :
   • 같은 파일에서만 사용되고 내보내지지 않는 Profile 컴포넌트를 정의하세요.
   • 디폴트 내보내기(default export)로 Gallery 컴포넌트를 내보내세요.
2. App.js:
   • Gallery.js에서 디폴트 불러오기(default import)로 Gallery를 불러오세요.
   • 디폴트 내보내기(default export)로 루트 App을 내보내세요.

NOTE
아래와 같이 .js 파일 확장자를 작성하지 않은 파일을 보게 될 거예요.

import Gallery from './Gallery';

./Gallery.js와 ./Gallery 모두 리액트에서 작동하지만 전자의 경우가 네이티브 ES 모듈이 동작하는 방법과 비슷합니다.

 

디폴트 vs 이름이 있는 내보내기(default export vs named export)

자바스크립트로 값을 내보내는 방법에는 디폴트와 이름이 있는 내보내기, 이렇게 두 가지가 있어요. 지금까지의 예시에는 디폴트 내보내기만 사용되었어요. 하지만 같은 파일 내에서 이 두 가지 중 하나만 사용하거나 둘 모두를 사용할 수 있어요. 파일은 한 개보다 많은 디폴트 내보내기를 사용할 수 없지만 이름이 있는 내보내기는 원하는 만큼 사용할 수 있어요.

컴포넌트를 내보내는 방법은 컴포넌트를 불러오는 방법을 결정해요. 이름이 있는 내보내기와 같은 방법으로 디폴트 내보내기를 가져오면 오류가 발생해요. 아래의 표는 각각의 방법을 보여주고 있어요.

 

문법	내보내기 구문	불러오기 구문
디폴트	export default function Button(){}	import Button from './Button.js';
이름이 있는	export function Button() {}	import { Button } from './Button.js';

디폴트 불러오기를 작성할 때는 import 뒤에 원하는 이름을 넣으면 돼요. 예를 들어 import Banana from './Button.js로 쓴다고해도 여전히 같은 디폴트 내보내기로 불러온 컴포넌트를 제공해요. 반면 이름이 있는 불러오기에서 이름은 양쪽 모두 일치해야해요. 그래서 이름이 있는 불러오기라고 불려요!

 

사람들은 종종 파일을 단 하나의 컴포넌트를 내보낼 때 디폴트 내보내기를 사용하고 만약 여러 개의 컴포넌트와 값을 내보낸다면 이름이 있는 내보내기를 사용해요. 어떤 코딩 스타일을 선호하든 컴포넌트 함수와 이 컴포넌트를 포함하는 파일에 항상 의미있는 이름을 지어주세요. export default () => {}와 같이 이름이 없는 컴포넌트는 디버깅을 더 어렵게 만들어주기 때문이에요.

---

Exporting and importing multiple components from the same file | 같은 파일에서 여러개의 컴포넌트 내보내고 가져오기

만약 갤러리 대신에 하나의 Profile만을 보여주고 싶다면 어떻게 할까요? Proflie도 내보내면 돼요. 그러나 Gallery.js는 이미 디폴트 내보내기가 있기 때문에 두 개의 디폴트 내보내기를 쓸 수는 없어요. 디폴트 내보내기로 새로운 파일을 만들거나 Profile로 이름이 있는 내보내기를 추가하세요. 파일은 디폴트 내보내기를 단 한 개만 가질 수 있지만 이름이 있는 내보내기는 무한대로 갖고 있을 수 있어요!

NOTE
디폴트와 이름이 있는 내보내기의 잠재적인 혼란을 줄이기 위해 몇몇 팀은 (디폴트나 이름이 있는 내보내기 중) 하나의 스타일만을 고수하거나 한 파일에서 이들을 섞어서 사용하지 않아요. 여러분도 여러분에게 맞는 방법을 사용하세요!

 

먼저, Gallery.js에서 Profile을 (default 키워드가 없이) 이름이 있는 내보내기를 사용하여 내보내세요.

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

 

그 다음, (중괄호로) 이름이 있는 불러오기를 사용하여 App.js 안에서 Gallery.js의 Profile을 불러오세요.

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

 

마지막으로 App 컴포넌트에서 <Profile />를 렌더링하세요.

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

 

이제 Gallery.js는 두 개의 내보내기, 디폴트 내보내기를 사용한 Gallery와 이름이 있는 Profile 내보내기를 포함하고 있어요. App.js는 이 둘을 모두 가져와요. <Profile />을 <Gallery />로 수정하고 돌아오세요.

 

 

이제 디폴트와 이름이 있는 내보내기를 함꼐 사용했어요.

• Gallery.js:
  • Profile 컴포넌트를 Profile이라는 이름이 있는 내보내기로 추출했어요.
  • Gallery 컴포넌트를 디폴트 내보내기로 추출했어요.
• App.js:
  • Profile 컴포넌트를 Gallery.js에서 Profile이라는 이름이 있는 불러오기로 불러왔어요.
  • Gallery 컴포넌트를 Gallery.js에서 디폴트 불러오기로 불러왔어요.
  • 디폴트 내보내기로 App 컴포넌트를 내보냈어요.

---

Recap | 요약

이 페이지에서는

• 루트 컴포넌트 파일이 무엇인지
• 컴포넌트를 어떻게 불러오고(임포트하고) 내보내는지(익스포트하는지)
• 디폴트(default)와 이름이 있는 불러오기와 내보내기는 각각 언제 사용하는지
• 어떻게 한 파일에서 여러 개의 컴포넌트를 불러오고 내보내는지

를 배웠어요.

---

Challenges | 도전과제

1. 컴포넌트를 더 분리하기

현재 Gallery.js는 Profile과 Gallery를 모두 내보내고 있어서 약간 혼란스러워요.

 

Profile 컴포넌트를 Profile.js라는 자체 파일로 옮기고 App 컴포넌트를 <Profile />과 <Gallery />를 차례로 렌더링하는 컴포넌트로 변경하세요.

 

Profile을 내보낼 때 디폴트와 이름이 있는 내보내기 중 무엇이든 사용해도 되지만 App.js와 Gallery.js에서 이에 상응하는 불러오기 문법을 사용한다는 사실을 명심하세요! 위의 더 알아보기에 있었던 표를 참고하세요.

문법	내보내기 구문	불러오기 구문
디폴트	export default function Button(){}	import Button from './Button.js';
이름이 있는	export function Button() {}	import { Button } from './Button.js';

 

 

한 가지 경우의 내보내기로 문제를 해결했다면 이제 다른 방법으로도 시도해보세요!

컴포넌트를 사용하는 곳에서 불러오는 구문을 잊지 마세요! Gallery를 Profile에서도 사용했나요?

이름이 있는 내보내기를 이용한 답이에요.

 

 

이 정답은 디폴트 내보내기를 사용했어요.