Import 와 export

Import 와 Export는 언제, 왜 사용하는가

Import와 Export는 Module을 내보내거나 불러올 때 사용한다.

Module 이란?

초기의 JavaScript는 지금 보다 규모가 매우 작은 프로그램이었다. 웹 페이지에서 페이지가 넘어가는 등의 약간의 상호 작용만을 제공했기 때문이다. 하지만 시간이 지나면서 JavaScript는 규모가 큰 애플리케이션을 실행할 수 있을 정도로 커졌고 다른 실행 환경에서도 JavaScript를 사용하기에 이르렀다.

규모가 커지고 기능이 다양해짐에 따라 관리하기 용이하게 모듈 단위로 나눌 필요가 있었고 JavaScript는 그러한 메커니즘을 제공하기 시작했다.

export

export는 모듈을 내부에서 외부로 내보낼 때 사용한다. 한 모듈에 export 를 사용할 때 default를 추가로 붙이면 해당 파일에서 기본값으로 내보내는 모듈이 된다.

import

'import'는 모듈을 외부에서 내부로 불러올 때 사용한다. 보통 중괄호로 감싸서 해당 파일의 해당 모듈을 불러온다. export default로 지정되어있는 모듈은 기본값으로 불러올 수 있기 때문에 불러올 때 중괄호 없이 작성하여 불러오고, 원하는 변수명으로 바로 지어서 불러올 수 있다.

// export.js 파일 내부
export function sayHello(user) {
  
	console.log(`Hello, ${user}!`); 
}

export function sayBye(user) {}

const sayYes = "YES!!";

//기본값으로 내보내는 모듈
export default sayYes;

// import.js 파일 내부
// 기본값으로 지정된 모듈은 중괄호를 씌우지 않고 그냥 import 해야한다.
import sayYes, {sayHello, sayBye} from "./export.js";
console.log(sayYes);
// output : YES!!
sayHello("Aggie");
// output : Hello, Aggie!

// 기본값으로 지정된 모듈은 임의로 지정한 이름으로 바꿔서 호출 가능.
import sayNo from "./export.js";
console.log(sayNo);
// output : YES!!

만약 한 파일 안에 export한 모듈들이 많은 상황에서 모든 모듈들을 불러와야할 때 *을 쓰면 전체가 선택되어 불러와진다.

import * as All from "./export.js";
All.sayHello("철수");
// output : Hello, 철수!

위와 같이 불러올 모듈을 정하고 뒤에 as를 붙인 뒤에 원하는 변수명으로 지정해서 불러올 수도 있다.