import, export, export default 이해하기

지식 늘리기 VS 내가 당장 필요한 것

처음 ES Module을 사용할 때가 강의를 통해 클론코딩을 했을 때였다. 코드 이해하기에도 바쁘고 모듈화까지 하려니 그저 배워야하는 또 하나의 지식으로 느껴졌다. (그러니 다 까먹을 수밖에..) 

그렇게 시간이 지나고 포트폴리오 사이트를 제작하던 중에 내 예전 프로젝트들을 보게 되었다. 그 중 스스로 만든 날씨와 옷차림을 알려주는 프로젝트의 코드를 보았는데 main.js라는 파일 안에 모든 코드를 다 쏟아낸 것이 아닌가..이걸 보고나서 리팩토링을 하고싶은 욕구가 솟아났다.

그 중 ES Modules를 '필요로' 하다 보니 스스로 해당 내용을 찾게 되고

'아~이래서 이게 안됐었던 거구나'
'이런식으로도 되네?' 

라는 공감도 하게 되면서 좀 더 재미있게 진행하게 되었다. 하지만 내 머리는 일주일만 지나도 까먹기 때문에 기록의 필요성을 느껴서 블로그 글을 써야겠단 생각이 들었다.

ES Modules

• ES6에 표준으로 등재된 후로 문법은 진화를 거듭해 현재는 대부분의 주요 브라우저와 Node.js가 모듈 시스템을 지원한다.

• 모듈은 단지 파일 하나에 불과하다. export와 import를 통해 모듈 간 접근이 가능하도록 한다.

  • export : 변수나 함수, 클래스 앞에 붙이면 외부 모듈에서 접근 가능(모듈 내보내기)

  • import: 외부 모듈의 기능을 가져올 수 있다.(모듈 가져오기)

  • ⚠️ import 구문은 호이스팅 된다. (순서 고려)

export와 export default 사용하기

변수나 함수, 클래스 모두 export로 내보내기가 가능하다. 

모듈은 크게 두 종류로 나뉘는데, 상황에 맞는 구문을 써보자.

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

아래 두 가지 내보내기 모두 유효하다.

  
    
  
  
    
  

// 📂 game.js 
// 1. 선언부 앞에 export 붙이기
export function play(user) {
	alert(`Start! go ${user}`);
}

export function pause(user) {
	alert(`The ${user} has pause`);
}

  
    
  
  
    
  

// 📂 game.js 
// 2. 선언부와 떨어진 곳에 export 붙이기
function play(user) {
	alert(`Start! go ${user}`);
}

function pause(user) {
	alert(`The ${user} has pause`);
}

export {play, pause};

2. 개체 하나만 선언 되어 있는 모듈(default export)

export default 구문은 '해당 모듈엔 개체가 하나만 있다'는 사실을 명확히 나타낼 수 있다.

  
    
  
  
    
  

// 📂 user.js
// export 뒤에 default 추가
export default class User {
    constructor(name) {
    	this.name = name;
    }
}

따라서 내보낼 개체엔 이름이 없어도 유효하다. (default를 붙이지 않을 경우 ❎)

  
    
  
  
    
  

// 클래스 이름이 없음
export default class { 
  constructor() { ... }
}

  
    
  
  
    
  

// 함수 이름이 없음
export default function(user) {
  alert(`Hello, ${user}!`);
}

  
    
  
  
    
  

// 이름 없이 배열 형태의 값을 내보냄
export default ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

⚠️ 사실 named export와 default export를 같은 모듈에서 동시에 사용해도 문제는 없습니다. 그런데 실무에선 이렇게 섞어 쓰는 사례가 흔치 않습니다. 한 파일엔 named export나 default export 둘 중 하나만 사용합니다. - 모던 JavaScript 튜토리얼

import 사용하기

1. 복수의 함수가 있는 라이브러리 형태의 모듈(named export) 가져오기

  
    
  
  
    
  

// 📂 main.js
import {play, pause} from './game.js';

play('onlydev'); // Start! go onlydev
pause('onlydev'); // The onlydev has pause

2. 개체 하나만 선언되어 있는 모듈(default export) 가져오기

  
    
  
  
    
  

// 📂 main.js
// 중괄호 생략이 가능함
import User from './user.js';

new User('onlydev');

💡 named export 한 모듈을 가져오려면 중괄호가 필요하고, default export 한 모듈을 가져오려면 중괄호가 필요하지 않다는 걸 기억해 실수를 방지하자. - 모던 JavaScript 튜토리얼

'as'로 이름 바꾸기

export 'as'

  
    
  
  
    
  

// 📂 game.js
...
export {play as start, pause as stop};

그럼 이제 다른 모듈에서 함수들을 가져올 때 이름은 playing과 stop이 된다.

  
    
  
  
    
  

// 📂 main.js
import {start, stop} from './game.js';

start('onlydev'); // Start! go onlydev
stop('onlydev'); // The onlydev has pause

import 'as'

  
    
  
  
    
  

// 📂 main.js
import {play as start, pause as stop} from './game.js';

start('onlydev'); // Start! go onlydev
stop('onlydev'); // The onlydev has pause

참고, 좀 더 알아보기

모던 JavaScript 튜토리얼 - 모듈