[javascript] ES6 Module_export, export default

 

개인적으로 공부하면서 기록하는 공간으로
잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-)

▪ ▪ ▪ ▪ ▪

 

 

모듈(module)

모듈이란 여러 기능을에 관한 코드가 모여있는 하나의 파일 이다.

 

모듈의 장점

- 유지보수성: 기능들이 모듈화가 잘 되어있다면 기능을 개선한다거나 수정할 때 편리하다.

- 네임스페이스화: 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 네임스페이스가 겹치는 문제를 해결할 수 있다.

- 재사용성: 모듈을 분리시킴으로써 똑같은 코드를 반복하지않고 필요할 때마다 사용할 수 있다.

 

모듈에 지시자 export와 import를 적용하면 다른 모듈을 불러와 기능 공유를 할 수 있다.

- export 지시자: export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다.

- import 지시자: import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있다.

728x90

 

 

Named Export vs Default Export

1) Named Export (export)

• 이름이 지정된 내보내기를 사용하면 파일당 여러 개의 내보내기를 가질 수 있다.

• 내보내기를 가져올 때는 중괄호를 사용해야하며, 모듈의 이름은 내보낸 모듈의 이름과 동일해야 한다.

→ 'as'를 사용하여 다른 이름으로 import 가능

• 여러 값을 내보내는데 유용하다.

 

▼ 내보내기

export const FirstComponent {} 
export const SecondComponent {} 

// 또는
const FirstComponent = () => {}
const SecondComponent = () => {}

export { FirstComponent, SecondComponent }

▼ 가져오기

import { FirstComponent, SecoundComponent } from './ExportComponent'

// as를 이용하여 import 이름 변경 가능
import { FirstComponent as FirstImportComponent, SecoundComponent} from './ExportComponent'

 

 

2) Default Export (export default)

• Default로 선언된 모듈은 하나의 파일당 하나의 변수 또는 클래스만 내보낼 수 있다.

• 한 파일당 하나의 모듈만 내보내기(Export) 때문에 가져올 때(Import)는 내보낸 모듈의 이름과 동일하지 않아도 된다.

 

▼ 내보내기

const ExportComponent = () => {	}
export default ExportComponent;

▼ 가져오기

import ExportComponent from './ExportComponent'

// 또는 import명을 변경해서 사용가능
import ImportComponent from './ExportComponent'

 

 

Reference

✔ https://velog.io/@oneook/ES6-Modules-Named-Export-vs-Default-Export#tldr-%EF%B8%8F

✔ https://baeharam.netlify.app/posts/javascript/module

✔ https://ko.javascript.info/modules-intro