<무지성 export는 그만 멈춰~ 1탄 export의 정의 및 용법들>

필자는 무심코 이런 의문이 들었다.

내가 정말로 export를 알고 쓰는 것일까?

그냥 정말 무지성으로 쓰는 것은 아닐까?

그래서 이번 포스팅은 필자의 이런 엑스포트 무지성을 깨기 위한 포스팅이 되겠다.

01. export 란?

export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있다.

즉, export를 통해 밖으로 내보내 줘야, export문 안에서 선언된 것들을 다른 파일에서 끌어올 수가 있다. import가 가능하다는 말이다. 물론 필자역시 이런 개념은 알고 쓰고 있었다.

하지만, 뭔가 export가 아닌 export default로 쓰는 이유가 궁금했었다.
분명 export만으로도 쓰일 수 있는데 굳이 default를 붙여서 써야하는 건지 참.... 이해가 잘 안갔다.

02. export문의 용법.

먼저, export와 export default로 쓰는 것 사이에는 분명 차이가 있지만, 그보다 앞서 export가 쓰이는 용법부터 살펴보자.

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

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

// 배열 내보내기
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// 상수 내보내기
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// 클래스 내보내기
export class User {
  constructor(name) {
    this.name = name;
  }
}

• 유의점
  클래스나 함수를 내보낼 땐 세미콜론(;)을 붙이기🚫
  보통 우리는 해당 함수나 선언식을 만든 이후에 끝에 세미 콜론을 습관적으로 붙이는 경우가 많다.

클래스나 함수 선언 시, 선언부 앞에 export를 붙인다고 해서 함수 선언 방식이 함수 선언문에서 함수 표현식(function expression) 으로 바뀌지 않는다. 내보내 지긴 했지만 여전히 함수 선언문이다.

대부분의 자바스크립트 스타일 가이드는 함수나 클래스 선언 끝에 세미콜론을 붙이지 말라고 권유한다.

같은 이유로 export class나 export function 끝에 세미콜론을 붙이지 않는다.

03. import와 export의 추가 용법

물론 기본적으로 주로 사용하는 용법은 있지만, import와 export에서 역시 추가적인 용법은 존재한다.

1. import ‘as’

as를 사용하면 이름을 바꿔서 모듈을 가져올 수 있다. sayHi를 hi로, sayBye를 bye로 이름을 바꿔서 가져와 보자.

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

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

2. Export ‘as’

export에도 as를 사용할 수 있다. sayHi와 sayBye를 각각 hi와 bye로 이름을 바꿔 내보내 보자.

// 📁 say.js
...
export {sayHi as hi, sayBye as bye};

이제 다른 모듈에서 이 함수들을 가져올 때 이름은 hi와 bye가 된다.

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

say.hi('minsu'); // Hello, minsu!
say.bye('hyesu'); // Bye, hyesu!

3. import *

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

// 📁 main.js
import {sayHi, sayBye} from './say.js';
sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

위처럼 개별적으로 가져오는 것이 일반적이지만, 가져올 것이 많으면 import * as 처럼 객체 형태로 원하는 것들을 가지고 올 수 있다. 예시는 다음과 같다.

// 📁 main.js
import * as say from './say.js';
say.sayHi('John');
say.sayBye('John');

이렇게 '한꺼번에 모든 걸 가져오는 방식’을 사용하면 코드가 짧아진다. 그런데도 어떤 걸 가져올 땐 그 대상을 구체적으로 명시하는 게 좋다.

이렇게 하는 데는 몇 가지 이유가 있다.

🤙 1. 웹팩(webpack)과 같은 모던 빌드 툴은 로딩 속도를 높이기 위해 모듈들을 한데 모으는 번들링과 최적화를 한다. 이 과정에서 사용하지 않는 리소스가 삭제되기도 한다.

아래와 같이 프로젝트에 서드파티 라이브러리인 say.js를 도입하였다 가정하자. 이 라이브러리엔 수 많은 함수가 있다.

// 📁 say.js
export function sayHi() { ... }
export function sayBye() { ... }
export function becomeSilent() { ... }

현재로선 say.js의 수 많은 함수 중 단 하나만 필요하기 때문에, 이 함수만 가져와 보겠다.

// 📁 main.js
import {sayHi} from './say.js';

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

✏️ 2. 어떤 걸 가지고 올지 명시하면 이름을 간결하게 써줄 수 있다. say.sayHi()보다 sayHi()가 더 간결하다.

🖍3. 어디서 어떤 게 쓰이는지 명확하기 때문에 코드 구조를 파악하기가 쉬워 리팩토링이나 유지보수에 도움이 된다.

여기까지, 익스포트에 대한 정의 및 용법에 대해 살펴봤다. 조금 길어진 감이 있어 본격적인 의문점인 export와 export default는 2탄에서 다루도록 하겠다. 그럼 이만~