export와 export default의 차이점

React 문법을 사용하다 보면 모듈을 수출 할 때는 export를 사용하고 사용 방식에는 export, export default가 있고,

import를 할 때는 {}를 사용 할 때도 있고 사용하지 않을 때도 있어서 차이점을 정리 해두고 싶었다!

 

모듈을 내보내고 가져 올 때는 export와 import 지시자를 활용합니다.

 

차이점

지시어	설명	장점	단점
export {}	- named expoert라고 합니다. (ex) import 할 때 무조건 export한 객체 | 함수 이름 - 여러 개의 객체, 함수를 한꺼번에 내보낼 수 있음	내보냈을 떄 사용한 이름 그대로 가져오므로 관련 정보를 파악하기 쉽다.	내보냈을 떄 사용한 이름 그대로 가져오므로 관련 정보를 파악하기 쉽다.
export default	- 개발자가 원하는 이름으로 import 할 수 있음 (ex) import 원하는 이름 from '파일' - 한 모듈에 하나씩만 쓸 수 있음	named export와는 다르게 default export는 가져오기 할 때 개발자가 원하는 이름으로 지정해 줄 수 있다.	import 하는 것이 정확히 어떤 것인 지 알 수 없다. 이 단점을 해소하기 위해서는 다음과 같은 방법들을 사용 할 수 있다. - named export만 사용하기로 한다. - default export한 것을 가져올 때 아래와 같은 파일 이름과 동일한 이름을 사용하도록 팀원들끼리 내부 규칙을 정한다.

 

export 사용방법

 

- 선언부 앞에 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 끝에 세미콜론을 붙이지 않습니다.

export function sayHi(user) {
  alert(`Hello, ${user}!`);
}  // 끝에 ;(세미콜론)을 붙이지 않습니다.

 

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

: 선언부와 export가 떨어져 있어도 내보내기가 가능합니다. 아래 예시에서는 함수를 먼저 선언한 후, 마지막 줄에서 내보냅니다.

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

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

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

참고로 export문을 함수 선언부 위에 적어주는 것도 동일하게 동작합니다.

 

import 사용방법

 

- import *

: 무엇인가를 가져오고 싶을 때 아래와 같이 이에 대한 목록을 만들어 import {} 안에 적어주면 됩니다.

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

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

 

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

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

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

이렇게 '한꺼번에 모든 걸 가져오는 방식'을 사용하면 코드가 짧아집니다.

그런데도 어떤 걸 가져올 땐 그 대상을 명시적으로 구체적으로 명시하는 것이 좋습니다.

 

- import as

: as를 사용하면 이름을 바꿔서 모듈을 가져 올 수 있습니다. (별칭을 설정합니다.)

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

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

 

+ 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('John'); // Hello, John!
say.bye('John'); // Bye, John!

 

- export default

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

 

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

2.개체 하나만 선언되어 있는 모듈 (하나만 내보낼 수 있음)

 

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

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

 

모듈은 export default라는 특별한 문법을 지원합니다. export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나태낼 수 있습니다. 내보내고자 하는 개체 앞에 export default를 붙여봅시다.

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

파일 하나에는 대게 export default가 하나만 있습니다.

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

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

new User('John');

 

출처

https://pinokio0702.tistory.com/370?category=447289 

[Javascript] export와 export default의 차이점

https://ko.javascript.info/import-export#ref-4122

모듈 내보내고 가져오기