[JavaScript] default export VS named export 차이점과 사용하는 이유

import, export를 사용하는 이유

개발을 하는 애플리케이션의 크기가 커지면 언젠가는 파일을 여러 개로 분리해야 하는 시점이 생긴다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.

 

곧 모듈들을 나누는것을 모듈화라고 부르며, 소프트웨어를 각 기능별로 나누는 것을 말한다. 그리고 각각의 기능별로 나눠진 모듈화의 결과를 모듈이라고 하며 서브루틴, 소프트웨어 내의 프로그램 또는 작업 단위 등의 의미로 사용된다. 여기서 좋은 모듈화는 목적에 맞는 기능만으로 모듈을 나누는 것이다. 각각의 모듈은 주어진 기능만을 독립적으로 수행하며 다른 모듈과 적게 연관되야 한다.

 

즉, 독립성이 높은 모듈일수록 좋다. 독립성이 높으면 해당 모듈을 수정하더라도 다른 모듈에 끼치는 영향이 적으며 오류가 발생하더라도 쉽게 문제를 발견하고 해결할 수 있는 장점을 갖는다. 한편 모듈의 독립성은 모듈의 결합도(copling)과 응집도(cohesion)로 측정한다. 결론적으로는 모듈의 독립성을 높이기 위해서는 모듈 간의 상호 의존 정도를 나타내는 결합도는 낮추고 모듈이 독립적으로 자체 기능만을 수행하도록 응집도를 높혀야 한다.

 

그리고 독립적은 모듈은 필요한곳에 연결하기 위해서 import와 export를 사용하는 것이다.

 

 

---

 

 

1. Default Export

default export named 로 선언된 모듈은 하나의 변수 또는 클래스 등등 export 할 수 있다.

const Login = () => {
 
   ...
 
}
 
export default Login

 

 

default export 는 독립적으로 내보내기 때문에 import 할 때 이름 변경이 가능하다. 

 

import Login from '../component/Login'

또는

import Logout from '../component/Login'

 

 

 

 

2. Named export 

한 파일 내에서 여러 변수/클래스/함수 등 export 가능하다.

 

export const a = 1;
 
export class B {};
 
export function c () {};

또는

const a = 1;
 
class B {}
 
function c() {}
 
 
export { a, B, c }

 

 

import 사용 시 { } 안에 export 된 이름과 동일하게 입력해야한다. IDE 사용시 자동완성으로 불러와진다.

improt { a, B, c } from '../component/English'

 

다른 이름으로도 변경 가능하다. 다만 as 명령어를 사용해야 한다.

import { a as Test } from '../compoenet/English'

 

* as 를 사용하면 한 파일에 있는 클래스/함수/변수들을 한 번에 import 할 수 있다.

import * as Test from '../component/English'
// 이렇게 import 하면 Test.A 이런식으로 사용해야 한다.

 

 

---

 

 

결론

default export 는 컴포넌트 1개당 1개만 export 가능하다. 그렇기 때문에 import할 때 어떤 이름을 집어넣어도 동작한다. 하지만, 협업의 특성상 export 이름과 import 이름이 다르다면 다른 개발자들이 어려움을 겪을 가능성이 커지고, 컴포넌트를 비교해가면서 확인해야할 가능성이 높아진다. 물론, export 를 사용해도 as 를 사용해서 별칭을 바꿀 수 있지만, 명시적으로 변경했다는것을 하나의 컴포넌트에서 비교가 가능해지기 때문에 default export 에서의 이름 변경보다는 비교하기가 쉬울 것이라는 생각이 든다.

 

 

---

 

 

 

 

reference

* JavaSCript modules - mdn

* 코어 자바스크립트 - 모듈

* Named Export vs Default Export in ES6

* default export와 named export 차이점

* [번역] 자바스크립트 모듈에서 default export는 끔직합니다.