[JavaScript] default export 와 named export 는 무엇이 다를까?

22 Mar 2022 in Dev. Log on Development, React

우리가 리액트에서 컴포넌트 요소를 나누고 하다 보면 일반 export 와 default export 가 있고,
import를 할 때도 일반적으로 name을 쓰거나 중괄호로 묶어 쓰는 경우가 있다.

생초보 시절에 이것들이 조금 궁금했는데, 이제 막 코딩을 시작한 분들에게 도움이 되었으면 한다.

• Export 방식의 구분
  • default export
  • named export
• import 방식의 차이
  • default import
  • named import
• 특수한 케이스
• 결론

Export 방식의 구분

---

default export

// file: "default.js"
const MyComponent = () => {
  return <></>;
}

export default MyComponent;

• default export 는 무조건 한 파일당 한 가지만 export 된다.
• const 나 let 을 바로 export 할 수 없고 위의 코드처럼 밑에 따로 써주어야 한다.

named export

// file: "named.js"
export const MyComponent = () => {
  return <></>;

export const MyNav = () => {
  return <></>;
}
}

• named export 는 한 파일당 여러개를 export 할수 있다.
• const let 바로 옆에 써줄 수 있다.

import 방식의 차이

---

default import

// file: "App.js"
import MyDefaultComponent from '/MyComponent.js';

• 단 하나의 컴포넌트를 export 한 것이기에 이름을 마음대로 지정해서 import 할 수 있다.

named import

// file: "App.js"
import { MyComponent, MyNav } from '/MyComponent.js';

• export 한 함수나, 변수명 그대로 import 해와야 한다.
  • 이름을 재정의 해주려면 { 컴포넌트 이름 as 바꿀 이름 } 이처럼 해야 한다.
• 이름을 항상 중괄호{ } 로 감싸 주어야 한다.
• * 을 써서 import 하면 해당 파일에 있는 모든 export 된 것을 한꺼번에 불러올 수 있다.
  • import * from '/MyComponent.js'

특수한 케이스

---

파일에 export 할 것이 하나밖에 없다. 그럼 당연히 default export 를 해올 테지만,
이러한 경우도 있다. 지금 당장 내보낼 것이 하나이지만 나중에 또 추가될 것이 예상되는 경우

// file: "default.js"
const MyComponent = () => {
  return <></>;
}

export { MyComponent };

• 이렇게 중괄호에 넣어서 export 한후 마찬가지로 중괄호로 묶어서 import 를 한다.

결론

---

상황에 맞게 잘 쓰되 이래서 이렇구나라고 이해를 하면 좋을 거 같다.
파일에 내보낼 것이 단 하나밖에 없다고 해도 그냥 named로 export도 가능하다.
그리고 두 가지의 속도 차이는 없다고 한다.