export, import

export와 import 지시자는 다양한 방식으로 활용되기 때문에 다양한 사용법이 존재합니다.

 

1. 선언부 앞에 export 붙이기.

 

변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능합니다.

export let arr = [1,2,3,4,5];

export const NOT_CHANGE = 'NC';

export class User{
	constructor(this){
    	this.name = name;
    }
}

 

클래스나 함수 선언 시, 선운부 앞에 export를 붙인다고 해서 함수 선언 방식이 선언문에서 표현식으로 변경되지 않습니다. 그렇기 때문에 자바스크립트 스타일 가이드에서는 함수나 클래스 선언 끝에 세미콜론을 붙이지 말라고 권유합니다. 따라서 export class, export function 끝에 세미콜론을 붙이지 않습니다.

 

 

 

2. 선언부와 떨어진 곳에 export 붙이기

 

선운부와 export가 떨어져 있어도 내보내기가 가능합니다.

function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 두 함수를 내보냄

 

 

Import *

 

무언가 가져오고 싶다면 아래와 같이 목록을 만들어 import {...} 안에 적어주면 됩니다.

만약 가져오는 것이 많다면 import * as <obj> 처럼 객체 형태로 원하는 것을 가지고 올 수 있습니다.

import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!


import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');

 

한 번에 모든 걸 가져오는 방식을 사용하면 코드가 짧아집니다. 하지만 어떤 걸 가져올 땐 그 대상을 구체적으로 명시하는 게 좋습니다.

 

1. 웹팩과 같은 모던 빌드 툴은 로딩 속도를 높이기 위해 모듈들을 한데 모으는 번들링과 최적화를 수행합니다.

이 과정에서 사용하지 않는 리소스가 삭제되기도 합니다.

 

프로젝트에는 서드파티 라이브러리가 존재하며, 그 안에는 수많은 함수들이 정의되어있습니다.

만약 그중 하나의 함수만 필요로 한다면 다음과 같이 import 구문을 사용합니다.

import {필요한 함수} from '위치';  

 

빌드 툴은 실제 사용되는 함수가 무엇인지 파악해, 그렇지 않은 함수는 최종 번들링 결과물에 포함되지 않습니다. 이과정에서 불필요한 코드가 제거되기 때문에 빌드 결과물의 크기가 작아집니다. 이러한 최적화 과정은 가지치기(tree-shaking)이라고 불립니다.

 

import as

 

as를 사용하면 이름을 바꿔서 모듈을 가져올 수 있습니다.

import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

 

export as

 

export에서도 as를 사용할 수 있습니다.

...
export {sayHi as hi, sayBye as bye};

 

 

export default

 

모듈은 크게 두 종류로 나뉩니다.

 

 1. 복수의 함수가 있는 라이브러리 형태의 모듈

 2. 개체 하나만 선언되어 있는 모듈

 

 

대개는 두 번째 방식으로 모듈을 만드는 걸 선호하기 때문에 함수, 클래스, 변수 등의 개체는 전용 모듈 안에 구현됩니다.

그런데 이렇게 모듈을 만들다 보면 자연스레 파일 개수가 많아질 수밖에 없습니다.  그렇더라도 모듈 이름을 잘 지어주고, 폴더에 파일을 잘 나눠 프로젝트를 구성하면 코드 탐색이 어렵지 않으므로 이는 전혀 문제가 되지 않습니다.

 

모듈은 export default라는 특별한 문법을 지원합니다.  이 export default를 사용하면 "해당 모듈엔 개체가 하나만 있다"는 사실을 명확히 나타낼 수 있습니다.

 

export default class User { // export 옆에 'default'를 추가해보았습니다.
  constructor(name) {
    this.name = name;
  }
}

이렇게 default를 붙여서 모듈을 내보내면 중괄호 { } 없이 모듈을 가져올 수 있습니다.

import User from './user.js'; // {User}가 아닌 User로 클래스를 가져왔습니다.

new User('John');