# 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`를 쓰면 기본적으로 보낼 것을 정한다. 파일에서 한번만 쓸 수 있다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://vlog.ireneworks.com/javascript/import-and-export.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.