관리 메뉴

KorSA

[ JavaScript ES 6 ] import, export 본문

Knowledge Wiki/Javascript

[ JavaScript ES 6 ] import, export

Praiv. 2021. 12. 17. 17:49
320x100

1. ES6에서 import&export를 이용하여 파일간 모듈식 개발 가능
    <script src="library.js"></script> 는 옛날 방식, but 호환성은 그만큼 좋음
    require()도 옛날 방식

// main.js
<script type="module">
import a from '/library.js';
</script>

// library.js
var a =10;
export default a;


2. export default는 파일 하나당 한번만 사용 가능
    여러개 export 하려면

export {a, b, c};


    이렇게 하거나

export {a};
export {b};


    이렇게 하거나

export var a = 10;

    이렇게 하면 됨

3. export를 여러개 하는 파일을 import할 때에는 export 변수명과 똑같이 맞춰서 써주어야 함.
    똑같이 맞추는 게 기존이지만 이름을 재지정해줄 수 있음

import {a as myA} from '/library.js';


4. export로 여러 개 변수를 내보내고 export default 하나만 딱 사용하는 건 가능

export {a, b} -> import {a} from '/library.js';
export default c -> import myC from '/library.js';


    export한 변수들을 모두 쓰려면

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


5. 전부 다 import 하는 문법이 따로 있음

import * as myAll from '/library.js';

console.log(myAll.a);
console.log(myAll.b);


    export default 변수는 * 문법으로 커버가 안되서 직접 써주어야 함

import myC, * as myAll from '/library.js';

console.log(myC);
728x90
728x90
Comments