[javaScript] export와 export default의 차이점

 

나도 모르게 export와 export default를 섞어 쓰고 있음을 발견했다. 이 둘의 차이를 명확하게 알아보면서 좀 더 일정한 코드 작성을 해보고자 한다.

 

export

---

export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다. export 키워드는 선언문 앞에 사용한다.

// 변수의 export
export const name = 'Ann';

// 함수의 export
export function sayHello() {
    console.log('Hello World!');
}

// 클래스의 export
export class Person {
    constructor(name){
        this.name = name;
    }
}

 

선언문 앞에 매번 export 키워드를 붙이는 것이 번거롭다면 export할 대상을 하나의 객체로 구성하여 한 번에 export할 수 있다.

const name = 'Ann';

function sayHello() {
    console.log('Hello World!');
}

class Person {
    constructor(name){
        this.name = name;
    }
}

// 변수, 함수, 클래스를 하나의 객체로 구성하여 export
export {name, sayHello, Person};

 

import시 모듈이 export한 이름으로 import해야 한다.

import {name, sayHello, Person} from './test.js'

console.log(name);
sayHello();
console.log(new Person('Lee'));

 

모듈이 export한 식별자 이름을 일일이 지정하지 않고 하나의 이름으로 한 번에 import 할 수도 있다. 이때 import되는 식별자는 as 뒤에 지정한 이름의 객체에 프로퍼티로 할당된다

import * as test from './test.js'

console.log(test.name);
test.sayHello();
console.log(new test.Person('Lee'));

 

모듈이 export한 식별자 이름을 변경하여 import할 수도 있다.

import {name as myName, sayHello(), Person} from './test.js'

console.log(myName);
sayHello();
console.log(new Person('Lee'));

 

단, airbnb 컨벤션에 의하면 wildcard import(*)는 사용하지 말라고 한다.

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

 

export default

---

모듈에서 하나의 값만 export한다면 default 키워드를 사용할 수 있다. default 키워드를 사용하는 경우 하나의 값을 export 한다

export defualt x => x*x;

 

단 default 키워드를 사용하는 경우, var, let, const 키워드는 사용할 수 없다.

export defualt cosnt square = (x) => x*x;
// SyntaxError

 

default 키워드와 함께 export한 경우 {}없이 임의의 이름으로import한다.

import square from './square.js'

console.log(square(2));

 

export VS export default

---

만약 하나의 값만을 export할 때 둘 중 무엇이든 사용할 수 있다. 하지만 일정한 코드를 지키기 위하여 airbnb 컨벤션을 참고해 보면 default를 붙이는 것을 추천한다고 한다.

// bad
export function foo() {}

// good
export default function foo() {}

하나의 값을 export할 때는 export default를, 여러 값을 export할 때는 export {} 객체 형식을 사용하면 될 것 같다.

 

참고

---

모던 자바스크립트 Deep Dive - 교보문고

GitHub - airbnb/javascript: JavaScript Style Guide