import & export

import는 다른 곳에서 내보낸 바인딩을 가져올 때, export는 자바스크립트 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다. 각각 사용하지만 export한 게 없면 import할 수 없고, import 하지 않으면 export한 의미가 없기에 보이지 않는 영혼의 한 쌍이다.

import

    import defaultExport from "module-name";

import는 from과 함께 사용한다. from 이후 값은 어디서 가져오는 지 주소라 생각하면 된다(라이브러리의 이름이 들어가기도. 결국 주소를 뜻하기 때문에 주소와 같은 말.). 위처럼 쓰면 "module-name"에서 defaultExport를 가져온다는 의미다. 가져온 모듈은 "use strict"의 존재 유무와 상관없이 무조건 엄격모드다. 또한 HTML 안에 작성한 스크립트에서는 import를 사용할 수 없다. 이렇게 가져온 모듈은 해당 페이지에서 얼마든지 원래 성격에 따라 함수, 객체, 원시 값 등 그대로 사용할 수 있다.

 

다양한 사용법

    import * as name from "module-name"; //1
    import { export1 } from "module-name"; //2
    import { export1 as alias1 } from "module-name"; //3
    import { export1 , export2 } from "module-name"; //4
    import { foo , bar } from "module-name/path/to/specific/un-exported/file"; //5
    import { export1 , export2 as alias2 , [...] } from "module-name"; //6
    import defaultExport, { export1 [ , [...] ] } from "module-name"; //7
    import defaultExport, * as name from "module-name"; //8
    import "module-name"; //9

1번은 해당 모듈의 있는 값을 name 이란 이름으로 모두 사용하겠다는 표시다. 즉 "module-name" 안에 start라는 함수가 있다면, name.start()로 사용할 수 있다. 

2번은 구조분해할당(Destructuring)한 것으로, 해당 모듈에 있는 것 중 export1이란 것을 그대로 가져와 사용하겠다는 의미다.

3번은 2번과 같으면서 대신 이름을 export1 대신 alias1으로 사용하겠다는 표현이다.

4번은 2번과 같다. 대신 여러가지를 불러온 것이다.

5번은 특정 주소값에서 가져온 것을 표현.

6번은 2번과 3번을 동시에 쓸 수 있다는 것을 표현.

7번은 6번과 동시에 해당 모듈에서 설정한 default export도 함께 가져올 수 있다는 의미며, default export는 맨 앞에 써야하나.

8번은 default export와 1번을 동시에 쓴 것을 표현.

9번은 특별한 바인딩 없이 문서나 프로그램만 연결 시켜 놓은 것. 불러 온 게 프로그램이라면 변수할당만 안했을 뿐 실행은 된다.

 

export

export도 import와 같이 무조건 "use strict"면서, HTML 스크립트 안에서는 사용할 수 없다. 기본적으로 내보내기 원하는 선언부 앞에 export를 선언하면 된다. 변수든 함수든 그 앞에 export를 쓰면 export 준비 완료다.

 

사용법

    // 하나씩 내보내기
    export let name1, name2, …, nameN; // var, const도 동일
    export let name1 = …, name2 = …, …, nameN; // var, const도 동일
    export function functionName(){...}
    export class ClassName {...}

    // 목록으로 내보내기
    export { name1, name2, …, nameN };

    // 내보내면서 이름 바꾸기
    export { variable1 as name1, variable2 as name2, …, nameN };

    // 비구조화로 내보내기
    export const { name1, name2: bar } = o;

    // 기본 내보내기
    export default expression;
    export default function (…) { … } // also class, function*
    export default function name1(…) { … } // also class, function*
    export { name1 as default, … };

사용법은 import 거의 같다. 다만, export에는 default가 새로 추가되었다. export 뒤에 default 를 기재할 경우 import 시 구조분해할당 없이 바로 선언한 해당 이름으로 사용할 수 있다(import 처음 코드 참조). 또한 default는 모듈 하나에서 하나만 가능하다.

 

결론

import와 export는 자바스크립트에서 뗄레야 땔 수 없는 친구들이다. react.js나 next.js등 라이브러리를 사용할 때도 많이 사용한다. 따라서 어려운 부분은 아니지만, 기본 사용법은 잘 숙지하고 있어야할 듯하다.

모듈 내보내고 가져오기

[MDN] import

[MDN] export

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)