[React] 컴포넌트 import 및 export 하기

 

컴포넌트 import 및 export 하기

리액트 컴포넌트의 import와 export는 자바스크립트 ES6 모듈 시스템을 사용하여

다른 파일에서 컴포넌트를 가져오거나 내보내는 방법입니다.

이를 통해 코드의 모듈화와 재사용성이 높아집니다.

 

1. Default Export와 Import

Default Export

기본 내보내기(default export)는 파일당 하나의 주요 컴포넌트를 내보낼 때 사용됩니다.

기본 내보내기를 할 때는 export default를 사용합니다.

// 컴포넌트 파일 MyComponent.js
function MyComponent() {
  return <div>Hello, World!</div>;
}

export default MyComponent;

위의 코드에서 MyComponent 컴포넌트를 기본으로 내보내고 있습니다.

 

Default Import

기본 내보내기를 가져올 때는 중괄호 {}를 사용하지 않습니다.

내보내진 이름을 그대로 사용합니다.

import MyComponent from './MyComponent';

// 사용하는 파일 App.js
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

export default App;

위의 코드에서 MyComponent를 가져와서 App 컴포넌트 안에서 사용하고 있습니다.

MyComponent를 가져올 때 중괄호 {} 없이 사용했습니다.

 

기본 내보내기(import)를 하면 이름을 마음대로 정할 수 있습니다.

(예시: MyComponent를 CustomName이라는 이름으로 가져와도 됩니다.)

import CustomName from './MyComponent';

App 컴포넌트 안에서 사용할 때 <CustomName />으로 사용할 수 있습니다.

 

 

2. Named Export와 Import

Named Export

이름이 지정된 내보내기(named export)는 파일에서 여러 개의 컴포넌트를 내보낼 때 사용됩니다.

이 경우에는 각각의 컴포넌트를 export 키워드와 함께 내보냅니다.

// 컴포넌트 파일 (components.js)
export function ComponentOne() {
  return <div>Component One</div>;
}

export function ComponentTwo() {
  return <div>Component Two</div>;
}

위의 코드에서 ComponentOne과 ComponentTwo를 이름이 지정된 내보내기로 내보내졌습니다.

 

Named Import

이름이 지정된 내보내기를 가져올 때는 중괄호 {}를 사용합니다.

내보낸 이름을 그대로 중괄호 안에 넣습니다.

import { ComponentOne, ComponentTwo } from './components';

// 사용하는 파일 App.js
import React from 'react';
import { ComponentOne, ComponentTwo } from './components';

function App() {
  return (
    <div>
      <ComponentOne />
      <ComponentTwo />
    </div>
  );
}

export default App;

위의 코드에서 ComponentOne과 ComponentTwo를 가져와서 App 컴포넌트 안에서 사용하고 있습니다.

ComponentOne과 ComponentTwo를 가져올 때 중괄호 {}를 사용했습니다.

 

 

간단한 예제 프로젝트 구조

my-app/
  ├── src/
  │   ├── components/
  │   │   ├── MyComponent.js
  │   │   ├── components.js
  │   ├── App.js
  │   ├── index.js

// MyComponent.js
function MyComponent() {
  return <div>Hello, World!</div>;
}

export default MyComponent;

// components.js
export function ComponentOne() {
  return <div>Component One</div>;
}

export function ComponentTwo() {
  return <div>Component Two</div>;
}

// App.js
import MyComponent from './components/MyComponent';
import { ComponentOne, ComponentTwo } from './components/components';

function App() {
  return (
    <div>
      <MyComponent />
      <ComponentOne />
      <ComponentTwo />
    </div>
  );
}

export default App;

 

 

Recap

• Default Export와 Import
  하나의 컴포넌트를 내보내고 가져올 때 사용합니다.
  내보낼 때 export default를 사용하고,
  가져올 때는 중괄호 {} 없이 사용합니다.
• Named Export와 Import
  여러 개의 컴포넌트를 내보낼 때 사용합니다.
  내보낼 때 export를 사용하고,
  가져올 때는 중괄호 {}를 사용합니다.