[JS] ES Modules 모듈 (Import / Export 시스템)

Intro

---

• 1개 파일에 모든 코드가 들어간 것 보다 코드들이 잘개 쪼개져 있는게 더 좋다.
• 모듈은 변수와 함수를 구성하는 더 좋은 방법을 제공한다.
• 모듈을 잘 알아두면 코드를 깔끔하게 정리할 수 있다.
• 모듈 덕분에 코드들을 작은 파일로 나눌 수 있고, import / export 할 수 있다.
• 모듈은 함수와 변수를 모듈 스코프에 넣고, 모듈 스코프를 통해 모듈 함수 사이에서 변수를 공유할 수 있다.
• 다이나믹 모듈을 이용하면 어플리케이션 로딩을 더 빠르게 할 수 있다.

 

Named Export

---

import { name } from "file";

 

• 파일 혹은 모듈이 원하는 만큼의 named exports를 가질 수 있다
• import 하려는 이름은 export 했던 함수(변수) 이름과 같아야 한다

 

// math.js
export const plus = (a, b) => a + b;
export const minus = (a, b) => a - b;
export const divide = (a, b) => a / b;

// main.js
import { plus } from './math';

 

as 키워드를 이용해 다른 이름으로 import 할 수 있다

import { plus as add } from './math';

 

* as name 키워드로 export한 모든 내용을 import 할 수 있다. * 키워드로 math.js 파일에 있는 모든 내용을 import한 후 myMath 객체에 넣는 예시.

 

모든 함수를 한번에 import하는 경우 ▼

// math.js
export const plus = (a, b) => a + b;
export const minus = (a, b) => a - b;
export const divide = (a, b) => a / b;

// main.js
import * as myMath from './math';
myMath.plus(2, 2);

 

Default Export

---

import name from "file";

 

• 각 파일마다 한개의 default export만 존재할 수 있다
• import할 때 {} 중괄호를 쓰지 않아도 된다
• 원하는 이름으로 import할 수 있다 (코드 일관성을 위해 파일 이름과 동일한 이름 사용 추천)
• default export와 named export를 섞어서 쓸 수 있다

 

math.js에 있는 함수를 일일이 import 하는 경우 ▼

// math.js
export const plus = (a, b) => a + b;
export const minus = (a, b) => a - b;
export const divide = (a, b) => a / b;

// main.js
import { plus, minus, dvide } from './math';

 

여러 함수(혹은 변수)를 1개의 객체 형태로 default export 하는 경우 ▼

// math.js
const plus = (a, b) => a + b;
const minus = (a, b) => a - b;
const divide = (a, b) => a / b;
export default { plus, minus, divide };

// main.js
import math from './math';

 

1개 함수만 default export 하는 경우 ▼

// db.js
const connectToDB = () => { /* magic */ };
export default connectToDB;

// main.js
import connect from './db';

 

named export와 default export를 함께 쓰는 경우 ▼

// -------- db.js --------
const connectToDB = () => { /* magic */ };
export const getUrl = () => { /* magic */ };
export default connectToDB;

// -------- main.js --------
import connect, { getUrl } from './db';

// default 키워드를 사용할 수도 있다
import { default as connect, getUrl } from './db';

// * 키워드를 사용해 모든 내용을 객체 형태로 가져올 수도 있다
// 이때 default 프로퍼티는 default export(connectToDB)를 가리킨다
import * as db from './db';
console.log(db); // { getUrl, default }

 

함수 선언부와 떨어진 곳에서 default export 하는 경우 ▼

const sayHi = (name) => {
  console.log(`Hello ${name}`);
};

export { sayHi as default };

 

다시 내보내기

---

다른 파일에 있는 named export와 default export를 불러와서 다시 내보낼 수 있다. import → export 하는 구문을 export ... from '...' 한 줄로 작성한 것과 동일하다고 보면 된다. 다시 내보내기 할 때 * 키워드를 이용하면 named export만 불러오기 때문에 default export 구문도 별도로 작성해줘야 한다.

 

아래 예시의 폴더 구조 ▼

math/
    ├── math.js
    └── index.js
user/
    └── calculator.js

 

수학 관련 함수를 모아놓은 파일 — math/math.js ▼

export const plus = (a, b) => a + b;
export const minus = (a, b) => a - b;
const divide = (a, b) => a / b;

export { divide as default } // export default (a, b) => a / b;

 

math.js 파일 내용을 불러온 후 다시 내보내기 — math/index.js ▼

// 1) named export 불러온 후 다시 내보내기
export * from './math.js'; // { plus, minus }

// 2) export default를 불러온 후 다시 내보내기
export { default } from './math.js'; // { default }

 

'./math/math.js' 처럼 폴더 이름과, 해당 폴더 안에 있는 파일 이름이 같다면 import 할 때 같은 이름을 중복해서 적는 셈이 된다. 다시 내보내기를 사용하면 import 구문에서 './math' 폴더명만 입력하면 된다.

 

참고로 폴더를 import 하면 번들러는 해당 폴더의 index.* 파일을 찾는다. a.com 같은 도메인을 입력해서 웹페이지에 접속했을 때 index.html 파일을 로드하는 것과 동일한 개념.

 

다시 내보내기한 함수 불러오기 — user/calculator.js ▼

// (방법1) * 키워드를 사용하지 않는 import 예시
import divide, { minus, plus } from './math';

// (방법2) * 키워드를 사용한 import 예시
import * as math from './math'; // { minus, plus, default }

 

💡 export default를 불러온 후 다시 내보낼 때 export { default as divide } ... 이렇게 as 키워드를 사용하면 named export가 된다. 따라서 import 구문은 import { divide } ... 형태로 입력해야 된다.

 

💡 리액트 import 구문은 파일 확장자를 입력하지 않는다(React CRA 포함 웹팩 번들러 처리방식)

 

폴더 구조 참고 Josh Comeau ▼

src/
└─ components/
   └─ FileViewer/
      ├─ Directory.js
      ├─ File.js
      ├─ FileContent.js
      ├─ FileViewer.helpers.js
      ├─ FileViewer.js
      ├─ index.js
      └─ Sidebar.js

 

index.js 파일에서 다시 내보내기 ▼

// FileViewer.js의 named export를 가져와서 다시 내보내기
export * from './FileViewer';

// FileViewer.js의 export default를 가져와서 다시 내보내기
export { default } from './FileViewer';

 

빠른 로딩을 위한 팁

---

필요한 것만 import 한다

특정 파일의 특정 함수만 사용하는 경우라면(아래 예시에선 plus 함수) 파일의 모든 내용을 한번에 import 하는 default export보단 named export를 사용하는 것이 좋다. 한편으론 모든걸 default export에 담아버리는 것보단 named export로 함수를 정리하는게 더 깔끔하기도 하다.

// math.js
export const plus = (a, b) => a + b;
export const minus = (a, b) => a - b;
export const divide = (a, b) => a / b;

// *.js
import { plus } from './math';

 

Dynamic Import 활용

💡 import(module) 구문은 모듈이 내보내는것을 모두 포함하는 객체를 담은 이행된 프로미스를 반환한다. 호출 위치에 제한이 없으므로, 코드 어디서든 동적으로 사용할 수 있다.

 

import 방식은 파일 위에서부터 모든 내용을 import 한다. 이는 로딩 속도를 늦추는 원인이 된다. 유저가 사용하든 안 하든 웹사이트의 모든 코드를 다운로드해야 하기 때문이다.

 

대신 Dynamic Import를 사용하면 실제 유저가 사용할 모듈만 import 할 수 있다. 아래 예시에서 유저가 버튼을 클릭할 때만 Math 모듈을 import 하고 사용한다. 요청이 있을 때만 모듈을 로딩하는 효율적인 방법이다.

// Dynamic Import 예시
function doMath() {
  import('./math').then((math) => math.plus(2, 2));
}
btn.addEventListener('click', doMath);

// async, await 활용
async function doMath() {
  const math = await import('./math');
  // named export라면 아래처럼 사용 가능
  // const { plus, minus } = await import('./math')

  // default export한 모듈은 default 프로퍼티로 읽을 수 있음
  // const { default } = await import('./say.js')
  math.plus(2, 2);
}
btn.addEventListener('click', doMath);

 

💡 리액트에선 React.lazy() 메서드를 이용해 코드 분할 → 번들 크기를 줄여서 초기 페이지 로딩 성능을 향상시킬 수 있다. React.lazy()는 주로 라우팅 라이브러리와 함께 사용한다. 사용 방법은 import() 구문과 비슷하지만 default export만 지원한다. named export를 사용하려면 아래처럼 추가적인 처리가 필요하다.

// OtherComponent가 default export 일 때
const OtherComponent = React.lazy(() => import('./OtherComponent'));

// OtherComponent가 named export 일 때
const OtherComponent = React.lazy(() =>
  import('./OtherComponent').then((module) => ({
    default: module.OtherComponent,
  })),
);

 

레퍼런스

---

• Export Default 과연 제대로 알고계십니까?
• ES modules - 만화로 보는 심층 탐구
• 동적으로 모듈 가져오기
• 모듈 내보내고 가져오기   

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요