| Default

컴포넌트를 export 하는 방법에 default로 하는 방법이 있는데

이는 하나의 파일에서 하나의 컴포넌트를 보내고 싶을 때 사용하면 됩니다.

1. export

export default 키워드를 사용하면 됩니다.

export default function MyComponent() {

return <div>Hello, World!</div>;

}

OR

function MyComponent() {

return <div>Hello, World!</div>;

}

export default MyComponent;

2. import

import를 하려면 import키워드를 사용해 다른 파일에 있는 컴포넌트를 가져올 수 있습니다.

import 사용하고싶은 이름 from "export한 파일 경로"

이런 식으로 사용하면 됩니다.

import MyComponent from "./MyComponent";

function App() {

return (

<div>

</div>

);

}

| Named

컴포넌트를 named export 할 수도 있는데

이는 하나의 파일에서 여러 개의 컴포넌트를 export 하고 싶을 때 사용하면 됩니다.

1. export

단순히 컴포넌트 앞에 export 키워드를 붙여서 사용하면 됩니다.

export function MyComponent1() {

return <div>Hello, World!</div>;

}

export function MyComponent2() {

return <div>Hello, React!</div>;

}

2. import

named로 export 한 컴포넌트를 import 할 때는 중괄호를 꼭 같이 입력해야 됩니다.

import { 컴포넌트이름, 컴포넌트이름 } from "export한 파일 경로";

import { MyComponent1, MyComponent2 } from "./MyComponent";

function App() {

return (

<div>

</div>

);

}

그리고 원하는 이름으로 import 하고 싶으면 as키워드를 사용해야 합니다.

import { 컴포넌트이름 as 원하는컴포넌트이름, 컴포넌트이름 as 원하는컴포넌트이름 } from "export한 파일 경로";

import { MyComponent as Component1, MyComponent2 as Component2 } from "./MyComponent";

function App() {

return (

<div>

</div>

);

}

[React] 공식문서 공부 - Component의 export 와 import