200115(수) : import, export

이번 글에서는 import, export에 대해서 정리해보려고 한다. 바닐라코딩에서 과제나 알고리즘 문제를 풀다보면 제발 import, export에 대해서 공부하고 이해한 후에 문제를 풀어달라는 ken님의 간곡한 요청을 종종 볼 수 있다...

 

내 예상으로는 5주차부터는 react를 배우게 되는데, 우선 React.Component를 불러오는 것부터 시작해서 직접 만든 컴포넌트를 다른 컴포넌트에게 넘겨줄 일이 빈번하게 생기기 때문에 미리 알아두라는 의미가 아닐까 싶다. 물론 리액트 뿐만 아니라 여기저기에서 무수히 쓰이긴 하지만..!

 

아무튼 mdn 문서를 읽어보니 export 부터 정리하는게 이해하는데 순서가 맞을 것 같다.

 

1. export

• export 명령어는 '자바스크립트 모듈에서 함수, 객체, 원시 값 등을 내보내는' 역할을 한다. 그리고 한 파일에서 export한 값은 다른 파일에서 import하여 불러와 사용할 수 있다.
• export와 import 모두 HTML의 script 태그 내에서는 사용할 수 없다.

 

# 내보내기

export로 내보낼 때 내보내는 방식에는 크게 '기본(default) 내보내기'와 '유명(named) 내보내기'가 있다.

 

• 기본 내보내기는 1) 한 파일에서 하나만 내보낼 수 있고, 2) import해서 쓸 때에 원하는 이름을 붙여서 사용할 수 있다. 3) 하지만 default로 내보낼 경우, function과 class는 내보낼 수 있지만, var, let, const로 선언하면서 default로 내보내는 것은 불가능하다.
• 유명 내보내기의 특징으로는 1) 선언한 식별자(변수, 상수, 함수, 클래스 등)를 여러 개 내보낼 수 있고, 2) import 할 때는 내보낸 이름과 동일한 이름으로 사용해야 하며, 3) function, class 뿐 아니라 변수, 객체 등도 var, let, const를 이용해서 선언하면서 내보낼 수 있다.
• 부모 모듈이 자식 모듈을 가져와서 다시 내보낼 수 있다. 즉, 여러 개 모듈을 하나의 모듈에 전부 모은 후, 모은 파일에서 모두 export시킬 수 있다. 이렇게 하면 모든 모듈이 모아진 하나의 파일에서 모든 모듈을 불러올 수 있기 때문에 관리하기가 용이해진다.

 

[기본 내보내기 예제 코드]

// 1. 먼저 선언한 식별자 내보내기
export { myFunction as default };

// 2. 각각의 식별자 내보내기
export default function () { ... };
export default class { ... }

• 1번 방식은 마찬가지로 미리 선언한 변수 myFunction을 default로 하여 내보내는 방식이다.
• 2번 방식은 내보내면서 동시에 선언하는 방식이다.

 

[유명 내보내기 예제 코드]

// 1. 먼저 선언한 식별자 내보내기
export { myFunction, myVariable };

// 2. 각각의 식별자 내보내기(변수, 상수, 함수, 클래스)
export let myVariable = Math.sqrt(2);
export function myFunction() { ... };

// 3. 내보내면서 이름 바꿔주기
export { myFunction as function1, myVariable as variable };

• 1번 방식은 파일 내에서 myFunction, myVariable를 우선 선언한 후, 해당 변수들을 객체에 목록으로 담아서 export 하는 방식이다.
• 2번 방식은 내보낼 대상을 선언하면서 동시에 export하는 방식이다.
• 3번 방식은 1번 방식으로 내보낼 때, myFunction 대신 function1이라는 별명을 붙여 내보내는 방식이다.

 

2. import

• 다른 파일에서 export한 모듈을 값을 가져올 때 사용한다.
• 마찬가지로 HTML 파일 내의 script 태그 내에서는 사용이 불가능하다.

 

[기본 가져오기 예제 코드]

// 1. 기본값으로 가져오는 가장 간단한 방법
import myModule from "my-module.js";

// 2. 기본값을 가져온 후, 나머지를 가져오는 방법
import myDefault, * as myModule from "my-module.js";
// 3. 또는
import myDefault, {foo, bar} from "my-module.js";

• 1번 방식은 my-module.js 에서 내보낸 값을 기본값 myModule로 받는 방식이다.
• 2번 방식은 myDefault 값을 받은 후, 나머지 모든 모듈을 myModule로 받는 방식이다.
• 3번 방식은 myDefulat로 값을 받은 후, 필요한 모듈인 foo와 bar만 받는 방식이다.

 

[가져오기 예제 추가 코드]

// 1번 방식
import {myMember} from "my-module.js";

// 2번 방식
import {foo, bar} from "my-module.js";

// 3번 방식
import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module.js";

• 1번 방식은 my-module.js에서 내보낸 여러 모듈 중 myMember 모듈만 myMember 이름으로 받는 방식이다.
• 2번 방식은 내보낸 여러 모듈 중 foo와 bar 모듈만 foo와 bar 이름으로 받는 방식이다.
• 3번 방식은 아주 긴 이름으로 내보내진 모듈은 각각 shortName, short 이름으로 받는 방식이다. 이제 shortName, short 에 내보낸 값이 담겨있다.