[JavaScript/React] export와 export default의 차이는 간단하다

i

자바스크립트 es5나 es6를 사용할 때 or 리액트를 배울 때 

export와 export default를 사용해봤을 것이다.

 

이 둘의 역할은 모듈안에 함수 및 객체를 export해서

다른 모듈에서 import하고 사용하기 위함인 건 알 것이다.

 

export

function example1() {
	console.log('첫번째 예시입니다.');
}

function example2() {
	console.log('두번째 예시입니다.');
}

export { example1, example2 };

export는 export default와 달리

이렇게 하나의 모듈에 함수나 객체 등 여러가지를 선언해 놓았을 경우

함수 이름이나 객체, 클래스 등의 이름으로 여러 값을 export를 할 수가 있다

 

import { example1, example2 } from 'example.js'

example1();   // 첫번째 예시입니다.
example2();   // 두번째 예시입니다.

import 할 경우에도 export한 이름 그대로 import를 해야한다.

 

export default

function example() {
	console.log('첫번째 예시입니다.');
}

export default example;

export default는 export와 달리 하나의 모듈에서

선언된 함수 또는 객체 등 오직 하나의 값을 내보낼 때 사용한다.

 

그러다 보니 모듈(파일) 자체를 export하는 것이라고 볼 수도 있다.

 

import test from './example.js'

test();   // 첫번째 예시입니다.

import 할 경우도 export와는 달리

정해진 이름을 사용하는 것이 아닌 임의로 이름을 정할 수 있다.

 

 

export와 export default 차이점 정리

1. export는 여러 개의 값을 {}안에 하나로 묶어 내보낼 수 있지만 export default는 오직 하나의 값만 내보낼 수 있다.

2. import 할 때 export는 내보낸 이름 그대로 사용해야 하지만 export default는 내가 임의로 이름을 정할 수 있다.

 

둘 중에 어떤 것을 사용하는 게 좋을까?

만일 하나의 값만 export한다면 당연히 export default를 사용하는 것이 좋다.

왜냐하면 많은 파일들을 다룰 때 가독성 또는 유지 관리하기에 좋기 때문이다.

단, 팀으로 개발할 경우에는 파일이름과 동일하게 이름을 정하는 규칙을 만드는 것이 좋다.

 

그리고 그 외에는 export이다.

바로 위에서 말한 바와 같이 export default처럼 내 임의로 이름을 정하면

팀으로 개발을 하고, 모듈이 많아질 수록 정확히 어떤 모듈인지 파악하기 어려울 수 있다.

그러므로 export한 이름 그대로 사용하는 export를 사용하는 것이 좋다