[JS] 모듈을 받아오는 import와 모듈을 내보내는 export

Javascript에서 A파일에 작성한 코드를 B파일에서 쓰고 싶을 때 쓰이는 것이 바로 import와 export이다.

export는 현재 파일에 있는 어떤 변수나 함수, class 따위를 import 가능한 상태로 전환시켜주는 기능을 하고,
import는 현재 파일에서 다른 파일에 export 되어 있는 어떤 변수나 함수, class 따위를 쓸 수 있게 만드는 기능을 한다.

따라서, 먼저 export 부터 살펴보자.

export

export는 크게 두 가지가 있다.

이름을 지정하여 내보내기 (named)

//변수, 함수, 클래스를 선언하고 초기화하면서 동시에 export 하는 방법
export const randomNum = Math.random

//변수, 함수, 클래스를 선언하고 초기화한 뒤, 이미 선언된 식별자를 나중에 export 해주는 방법
const randomNum = Math.random
export randomNum

이 때, 내보내는 대상으로는 변수(var, let, const), 함수, class 가 가능하다.
참고로 위 코드의 경우, randomNum은 함수이다. 왜냐하면 Math.random이 메서드이기 때문이다.

기본 내보내기 (default)

//함수나 클래스를 선언하고 초기화하면서 동시에 export 하는 방법
export default function(){...}

//함수나 클래스를 선언하고 초기화한 뒤, 이미 선언된 식별자를 나중에 export 해주는 방법
function random() {
  const makeNum = Math.random();
  return makeNum;
}
export {random as default}

각주를 유심히 보면 이름을 지정하여 내보내기와 달리 기본 내보내기는 변수가 빠져있다.
왜냐하면, default의 대상으로 var, let, const가 올 수 없기 때문이다.

또한, 위 방식대로는 익명 함수를 default로 export 할 수 있지만, 아래의 경우 익명 함수를 쓸 수 없다. 이름이 없으면 추후에 어떤 함수를 default로써 내보낼 것인지 작성할 수 없기 때문.

 

import

거의 대부분의 소스코드 최상단에는 import 문이 적혀 있다. 이제 import에 대해 정확하게 알아보자.

300x250

//이름을 지정하여 내보내기 된 모듈 export1을 가져오기
import { export1 } from "경로";

//이름을 지정하여 내보내기 된 export1을 alias라는 식별자에 바인딩하여 가져오기
import { export1 as alias } from "경로";

//이름을 지정하여 내보내기 된 모듈 export1과 export2를 가져오기
import { export1 , export2 } from "경로";

//기본 내보내기된 모듈을 defaultExport라는 식별자에 바인딩하여 가져오기
import defaultExport from "경로";

//경로의 파일을 name이라는 식별자에 바인딩하여 가져오기
import * as name from "경로";

//식별자도 없이 그냥 경로의 파일 자체를 통째로 가져오기
import "경로";

경로의 경우, 절대경로와 상대경로 모두를 지원한다. 또한, 반드시 따옴표 혹은 쌍따옴표로 감싸주어야한다.
또한, 마지막 import 방식의 경우, 사실상 하나의 파일에서 코드를 작성한 것과 동일한 효과를 가져온다.

 

참고로 위 코드박스의 코드 예제는 MDN을 참조하여 변형하였다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import