> For the complete documentation index, see [llms.txt](https://vlog.ireneworks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vlog.ireneworks.com/javascript/import-and-export.md).

# Import Export

## import

```jsx
// ./style/index.ts

import * from './background';
import * from './label';
```

```jsx
// ./index.ts

import * as S from './style';

export default function Button() {

...

return (
    <S.Background>
        <Button/>
    </S.Background>
)}
```

###

### import

```jsx
//기본
import Example from './Example.js';

//export 할 때 default가 없으면 중괄호가 필수
import {Example} from './Example.js';

import React, {Component} from 'react';

//node_modules에 설치된 모듈을 불러올 때는 경로 지정 필요없음
import Example from 'Example';

//모듈 전체의 사이드 이펙트만 가져온다는데 
import './Example.js';
```

### export

```jsx
const coffee = function (i) {
   let sum = i + 2 
};

const example = 2;


export default coffee;
export {example};
export const foo = "HI";
```

```jsx
import coffee.sum, {example, foo} from './example';
```

`default`를 쓰면 기본적으로 보낼 것을 정한다. 파일에서 한번만 쓸 수 있다.