> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/til/curious-story/import.md).

# import / export

## 1. import 

기본 내보내기 이름 내보내기를 포함한 모든 모듈을 가져온다. 

```javascript
import * as React from 'react'
```

모듈에서 하나의 컴포넌트만 가져온다. 

```javascript
import { myMember } from "my-module.js";
```

기본 내보내기로 가져온다. 

```javascript
import React from 'react'
```

HashRouter을 Router로 별칭 등록 하여 사용한다. 

```javascript
import { HashRouter as Router } from 'react-router-dom'
```

## 2. export 

Child는 기본으로 내보내고 ContainerChild는 이름 내보내기한다. 

```javascript
export { Child as default, ContainerChild };
```

default로 내보낸 Home을  names로 내보낸다. 

```javascript
export { default as Home } from './home'
```

names로 내보내 것 중에 Home을 default로 내보낸다. 

```javascript
export { Home as default } from './'
```

{% tabs %}
{% tab title="Link.js" %}

```javascript
// src/components/Link/index.js
 
import React from 'react'

const Link = () => {
  return <button type="button"></button>
}

export default Link
```

{% endtab %}

{% tab title="index.js" %}

```javascript
// src/components/index.js

export { default as Link } from './Link'
```

{% endtab %}

{% tab title="App.js" %}

```javascript
// src/App/App.js

import { Link } from '../components'

function App() {
  return (
    <div className="App">
      <Link />
    </div>
  )
}

export default App

```

{% endtab %}
{% endtabs %}

### 2.1 컴포넌트&#x20;

```javascript
export const App = () => { ... }
```

```javascript
export default function App() { ... }
```

```javascript
class App extends React.Component { ... }

export default App
```