Export, import

Jian·2022년 9월 25일
0

JavaScript

목록 보기
14/27

📌 export, import


특정 JS파일을 다른 파일로 내보내고 불러올 수 있다.
이를 이용하면 javascript를 모듈식으로 개발할 수 있다.

📌 구문법


 <script scr='library.js'></script>

위 코드 이하에서 해당 파일의 모든 변수 꺼내 쓸 수 있음.
(제이쿼리 가져올 때랑 비슷하다고 보면 됨)

호환성 높기 때문에 FE에선 보통 이렇게 사용
(export, import는 IE 호환 X)

📌 ES6 문법으로 Export,Import


✔️ 기본세팅

HTML에서 JS파일 불러올 때 아래와 같이 작성하고 시작한다.

(index.js)

<script type="module">
 ( 여기에 import 코드 적는다 )
<script>

✔️ 한 개 변수만 export/import

export시

(library.js)

var a = 10;
export default a;

import시
불러올 때 이름은 자유롭게 지어도 됨

(index.js)

import aaaa from '/library.js';

✔️ 여러개의 변수 export/import

export시

(library.js)

var a = 10;
var b = 20;

export { a, b };

import시

  • import시, export파일에서 설정한 변수명을 정확히 적어준다.
(index.js)

import { a, b } from '/library.js';
  • import시 변수명 변경하려면 아래와 같이 작성하면 된다.
import {a as a1} from '/library.js'
// library.js의 a변수를 a1로 변수명 변경해 불러온다.

✔️ 일반 Import와 default Import 변수 한 번에 불러오기

export시

(library.js)

var a = 10;
var b = 20;
var c = 30;

export default c;
export { a, b };

import시
defualt import변수를 가장 앞쪽에 적어줘야한다.
default 변수는 자유롭게 작명하여 불러올 수 있다.

(index.js)

import c, { a, b } from '/library.js';

✔️ 파일 전체 import해오기

- 기본
default를 제외한 해당 경로의 모든 변수가 import된다.
이때 불러온 변수들은 Module 안에 들어있다.
특정 변수 꺼내려면

Module.변수명

import * as lib from '/library.js'
console.log(lib)
console.log(lib.a)
console.log(lib.b)

- default변수도 같이 import하기
default 변수를 가장 앞 쪽에 써준다.

import c,  * as lib from '/library.js'
console.log(c)
console.log(lib.a)
profile
개발 블로그

0개의 댓글