2021. 9. 18
© WONKOOK LEE
ES6 Modules: Named Export vs. Default Export
ES6는 import/export 문법으로 모듈을 가져와 다른 파일에서 사용할 수 있다. 파일에서 모듈을 내보내는 두 가지 방법이 있는데, 이름이 지정된 내보내기(Named Export)와 기본 내보내기(Default Export)이다. 이 두가지 방법의 차이점은 무엇인지 명확히 하는 것을 넘어 JS의 모듈 개념에 대해 간단히 알아보았다.
TL;DR ⚡️
-
Named Export 특징
- 한 파일 내에서 여러개의 변수/클래스/함수를 Export 할 수 있다.
- Import할 때
as
키워드를 사용해서 다른 이름을 지정할 수 있다.
-
Default Export 특징
- 한 파일 내에서 단 한개의 변수/클래스/함수만을 Export 할 수 있다.
- from 뒤에 명시한 파일에서 단 한개의 모듈만 가져오기 때문에
as
키워드 없이 원하는대로 이름을 바꿀 수 있다.
사전 지식 📚
자바스크립트의 모듈(Module)이란?
모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일을 말한다. 모듈 개념을 활용은 아래의 장점이 있다.
- 유지보수성 : 기능별로 코드를 모듈화하면 해당 기능에 대한 수정과 관리에 용이하다.
- 네임스페이스화: 모듈과 함께 네임스페이스를 분리하여 전역 공간에서 코드의 이름이 겹치는 문제를 해결할 수 있다.
네임스페이스란? 이름들을 한곳에 모아 충돌을 미리 방지하고, 해당 이름으로 선언된 변수와 함수를 쉽게 가져다 쓸 수 있는 인위적인 공간을 말한다. 자바스크립트는 네임스페이스 기능이 따로 없는 대신 객체 리터럴과 즉시 실행 함수(IIFE)를 통해 그 기능을 구현할 수 있다. 네임스페이스의 분류 빌트인(Built-in) 네임스페이스 > 전역(Global) 네임스페이스 > 지역(Local) 네임스페이스
- 재사용성: 모듈을 분리시킴으로써 반복 없는 재사용이 가능하다.