[JS] export와 export default

Q. export와 export default는 어떤 차이가 있을까?

리액트를 사용하다보면 컴포넌트를 추출해서 다른 컴포넌트에서 활용할 때 export default ~~ 를 쓰게 된다. 또한 어떨 때는 export ~~만 사용할 때도 있다.

이 둘의 차이에 따라서 import 할 때 {}를 붙이는 경우도 있고 안 붙이는 경우도 있다. mdn 문서를 참고하면서 정리해보자!

---

export

자바스크립트 모듈에서 값을 내보내기 위해 사용한다.

이때 모듈은 애플리케이션에서 각각 분리된 파일들 혹은 라이브러리이다.
즉, 파일 하나를 모듈이라고 할 수 있다.
이 모듈을 내보내는 것은 export, 가져오는 것은 import 이다.

export에는 default export와 named export가 있다.
모듈 당 하나의 default export를 할 수 있고, 모듈 내에서 여러 개의 named export를 할 수 있다.

default export

default export는 말그대로 기본이기 때문에 한 모듈당 하나만 대응될 수 있다. (한 모듈 안에서 딱 한 번 사용된다.)

• 그렇기 때문에, import 시 중괄호를 사용하지 않고 불러올 수 있다.
• 원하는 이름으로 불러올 수 있다.

export default App // App.js 파일
import m from './App' // 다른 파일에서 

다른 예시들도 살펴보자.

export default function () {
  console.log("Hi");
}

• 익명 함수를 선언해도 된다.
• 왜일까?
  • default export는 한 모듈 당 하나만! 존재하기 때문에, 이름이 없어도 괜찮다.
  • 자유롭게 원하는 이름으로 불러올 수 있기 때문이다.

export default function () { /* … */ }
export default class { /* … */ }

• function과 class를 default로 내보낼 수 있다.

export default 1 + 1;

• 위와 같은 식도 export가 가능하다.

named export

named export는 한 모듈당 여러번 사용 가능하다.

• import 시 {}를 사용하고, export한 이름 그대로 사용한다. (as 키워드를 사용하면 원하는대로 바꿀 수 있다.)

export { myFunction2, myVariable2 };

• {}안에 나열하여 export가 가능하다.

// module.js 파일
export let myVariable = Math.sqrt(2);
export function myFunction() {
  // …
}

• var, let, const, function, class 선언을 사용해서 export가 가능하다.

import {myVariable, myFunction} from './module'

• 중괄호를 사용하여 import 한다.

export { myFunction as function1, myVariable as variable };

• named export도 as키워드를 사용해서 원하는 이름으로 불러올 수 있다.

---

A. export는 named export로, 한 모듈 안에서 여러 선언을 내보낼 수 있도록 해준다. 즉, 여러 변수, 함수, 클래스 등을 export 키워드와 함께 {} 안에 나열하여 내보낼 수 있다.
export default는 default export로, export의 한 형태이다. 이것은 모듈에서 기본적으로 내보내는 값을 지정하는 데 사용되며, import 할 때 중괄호 없이 가져올 수 있다.

참고 문서
mdn