JavaScript(7)

Import와 Export

모듈(Module): 특정 데이터들의 집합(파일)

Import(모듈 가져오기)

import { 가져올 모듈 명 } from '해당 모듈 경로'

Export(모듈 내보내기)

export const 모듈명 = 내용;

💡 JS에서 모듈 개념 사용하기 위해서는, type="module" 속성이 존재해야함

❗️ 프로젝트는 어떠한 기능이나 데이터들을 각각의 파일로 구분함 → 모듈

---

가져오기와 내보내기 패턴

1. 기본 내보내기 → default

하나의 파일(모듈)에서는 기본 내보내기로 하나의 데이터만 내보낼 수 있음

// ./module.js
export default 123;

모듈명이 명시되어 있지 않는 경우, 직접 명시 가능

// ./main.js
import number from './module.js';
console.log(number); // 123

2. 이름 내보내기

한 개 뿐만 아니라 여러개 내보낼 수 있음

// ./module.js
export const str = "ABC";
export const arr = [];
export function hello() {}

• 이름 내보내기로 명시된 모듈은 {} 안에 동일한 이름으로 명시

  // ./main.js
  import { str, arr, hello } from './module.js';

• 이름 변경해서 가져오기 → as 키워드 이용

  기존 이름 as 새로운 이름

  // ./main.js
  import { str as xyz, arr, hello } from './module.js';

• 모듈 내의 모든 속성 가져오기 → *(와일드 카드) 사용

  // ./main.js
  import * as abc from './module.js';
  
  console.log(abc.str);

---

동적으로 모듈 가져오기

❗️ import는 JS 최상단에 위치해야 함 → 중간에 import를 사용하면 SyntaxError 발생

코드 중간에 동적으로 모듈 가져와 사용하는 방법

→ import 함수 이용

import(모듈 위치).then(매개변수) => {});

ex) module.js에 있는 모듈 중간에 가져오기

1. then 이용하기

   setTimeout(() => {
   	import("./module.js").then(abc => {
   		console.log(abc);
   	});
   },1000);

2. 비동기(async-await) 이용

   setTimeout(async () => {
   	const abc = await import('./module.js');
   	console.log(abc);
   },1000);

---

모듈 가지고오자마자 내보내는 방법

→ utils 파일 안에 모든 모듈 내보내서, 사용할 파일에서 한 줄의 코드로 여러 모듈 사용 가능

// a.js
export const a = () => 123;

// b.js
export const b = () => 456;

// utils.js
export { a } from './a.js';
export { b } from './b.js';

// main.js
import { a, b} from './utils.js';
console.log(a());
console.log(b());