Importing and Exporting Components컴포넌트 import 및 export

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

In Your First Component, you made a Profile component and a Gallery component that renders it: 첫번째 컴포넌트에서 만든 Profile 컴포넌트와 Gallery 컴포넌트는 아래와 같이 렌더링 됩니다:

These currently live in a root component file, named App.js in this example. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page. 이 예제의 컴포넌트들은 모두 App.js라는 root 컴포넌트 파일에 존재합니다. 설정에 따라 root 컴포넌트가 다른 파일에 위치할 수도 있습니다. Next.js처럼 파일 기반으로 라우팅하는 프레임워크일 경우 페이지별로 root 컴포넌트가 다를 수 있습니다.

Exporting and importing a component컴포넌트 import 및 export하기

What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move Gallery and Profile out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps: 나중에 랜딩 화면을 변경하여 과학 도서 목록을 넣으려면 어떻게 해야 하나요? 아니면 모든 프로필을 다른 곳에 배치하고자 한다면? Gallery와 Profile을 root 컴포넌트 파일 밖으로 옮기는 것이 좋을 것 같습니다. 이렇게 하면 보다 모듈성이 강화되고 다른 파일에서 재사용할 수 있게 됩니다. 컴포넌트는 다음 세 단계로 이동할 수 있습니다.

1. Make a new JS file to put the components in.
2. Export your function component from that file (using either default or named exports).
3. Import it in the file where you’ll use the component (using the corresponding technique for importing default or named exports).

Here both Profile and Gallery have been moved out of App.js into a new file called Gallery.js. Now you can change App.js to import Gallery from Gallery.js: 여기서 Profile과 Gallery는 모두 App.js에서 Gallery.js라는 새 파일로 이동했습니다. 이제 App.js를 변경하여 Gallery.js에서 Gallery를 import할 수 있습니다:

Notice how this example is broken down into two component files now: 이제 이 예제에서는 컴포넌트들이 두 파일로 나뉘게 되었습니다:

1. Gallery.js:
   • Defines the Profile component which is only used within the same file and is not exported.
   • Exports the Gallery component as a default export.
   • 동일한 파일 내에서만 사용되며 export하지 않는 Profile 컴포넌트를 정의합니다.
   • Gallery 컴포넌트를 default export 방식으로 export 합니다.
2. App.js:
   • Imports Gallery as a default import from Gallery.js.
   • Exports the root App component as a default export.
   • Gallery를 Gallery.js로부터 default import 방식으로 import 합니다.
   • root App 컴포넌트를 default export 방식으로 export 합니다.

import Gallery from './Gallery';

Deep Dive | 심층 탐구

Default vs named exports

Show Details

There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. A file can have no more than one default export, but it can have as many named exports as you like. 보통 JavaScript에서는 default export와 named export라는 두 가지 방법으로 값을 export 합니다. 지금까지의 예제에서는 default export만 사용했지만 두 방법 다 한 파일에서 사용할 수도 있습니다. 다만 한 파일에서는 하나의 default export만 존재할 수 있고 named export는 여러 개가 존재할 수 있습니다.

How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track: Export 하는 방식에 따라 import 하는 방식이 정해집니다. Default export로 한 값을 named import로 가져오려고 하려면 에러가 발생합니다. 아래 표에는 각각의 경우의 문법이 정리되어 있습니다.

Syntax	Export statement	Import statement
Default	export default function Button() {}	import Button from './Button.js';
Named	export function Button() {}	import { Button } from './Button.js';

When you write a default import, you can put any name you want after import. For example, you could write import Banana from './Button.js' instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That’s why they are called named imports! default import를 사용하는 경우 원한다면 import 단어 후에 다른 이름으로 값을 가져올 수 있습니다. 예를 들어, import Banana from './button.js' 라고 쓰더라도 같은 default export 값을 가져오게 됩니다. 반대로 named import를 사용할 때는 양쪽 파일에서 사용하고자 하는 값의 이름이 같아야 해서 named import라고 불립니다.

People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values. Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like export default () => {}, are discouraged because they make debugging harder. 보편적으로 한 파일에서 하나의 컴포넌트만 export 할 때 default export 방식을 사용하고 여러 컴포넌트를 export 할 경우엔 named export 방식을 사용합니다. 어떤 방식을 사용하든 컴포넌트와 파일의 이름을 의미 있게 명명하는 것은 중요합니다. export default () => {} 처럼 이름 없는 컴포넌트는 나중에 디버깅하기 어렵기 때문에 권장하지 않습니다.

Exporting and importing multiple components from the same file동일한 파일에서 여러 컴포넌트 import 및 export하기

What if you want to show just one Profile instead of a gallery? You can export the Profile component, too. But Gallery.js already has a default export, and you can’t have two default exports. You could create a new file with a default export, or you could add a named export for Profile. A file can only have one default export, but it can have numerous named exports! 갤러리 대신 하나의 Profile만 표시하고 싶다면 어떻게 해야 하나요? Profile 컴포넌트도 export 할 수 있습니다. 하지만 Gallery.js에는 이미 default export가 있으며, default export를 두 개 가질 수는 없습니다. 새 파일을 만들어 default export 하거나, 혹은Profile에서 named export를 추가할 수도도 있습니다. 한 파일은 default export를 하나만 가질 수 있지만, named export는 여러 개 가질 수 있습니다!

First, export Profile from Gallery.js using a named export (no default keyword): 먼저 named export 방식을 사용해서 Gallery.js에서 Profile를 export 합니다. (default 키워드를 사용하지 않습니다):

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

Then, import Profile from Gallery.js to App.js using a named import (with the curly braces): 그 다음엔 named import 방식으로 Gallery.js에서 Profile를 App.js 파일로 import 합니다 (중괄호를 사용합니다):

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

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

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

Now Gallery.js contains two exports: a default Gallery export, and a named Profile export. App.js imports both of them. Try editing <Profile /> to <Gallery /> and back in this example: 이제 Gallery.js에는 default Gallery export와 named Profile export라는 두 가지의 export가 존재합니다. App.js에서는 두 컴포넌트를 import 해서 사용합니다. 아래의 예제에서 <Profile />과 <Gallery />를 교차해서 사용해 보세요:

Now you’re using a mix of default and named exports: 이제 default와 named export 방식 둘 다 사용할 수 있게 됐습니다:

• Gallery.js:
  • Exports the Profile component as a named export called Profile.
  • Exports the Gallery component as a default export.
  • Profile 컴포넌트를 Profile로 named export 합니다.
  • Gallery 컴포넌트를 default export 합니다.
• App.js:
  • Imports Profile as a named import called Profile from Gallery.js.
  • Imports Gallery as a default import from Gallery.js.
  • Exports the root App component as a default export.
  • Gallery.js에서 Profile를 Profile로 named import 합니다.
  • Gallery.js에서 Gallery를 default import 합니다.
  • root App 컴포넌트를 default export 합니다.