[javascript] ES6 Module_export, export default
개인적으로 공부하면서 기록하는 공간으로
잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-)
▪ ▪ ▪ ▪ ▪
모듈(module)
모듈이란 여러 기능을에 관한 코드가 모여있는 하나의 파일 이다.
모듈의 장점
- 유지보수성: 기능들이 모듈화가 잘 되어있다면 기능을 개선한다거나 수정할 때 편리하다.
- 네임스페이스화: 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 네임스페이스가 겹치는 문제를 해결할 수 있다.
- 재사용성: 모듈을 분리시킴으로써 똑같은 코드를 반복하지않고 필요할 때마다 사용할 수 있다.
모듈에 지시자 export와 import를 적용하면 다른 모듈을 불러와 기능 공유를 할 수 있다.
- export 지시자: export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다.
- import 지시자: import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있다.
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
댓글