[Module] Import, Export 간단쓰

Import와 Export는 파일의 독립적 관리를 통해 유지보수를 돕고, VanillaJS에서 뿐만 아니라 이후 node.js의 패키지 모듈 사용이나 ReactJS에서 빛을 발하게 된다.

 

1. 다른 .js 파일에서 하나의 함수 또는 하나의 상수/변수 불러오기 => default 키워드 이용.

// pi.js

const PI = 3.141592

export default PI;

// index.js
import pieeeee from "./pi";
console.log(pieeeee);

default 키워드를 이용할 때는 어차피 하나의 데이터만 전송하기 때문에, import하는 곳에서는 가져온 데이터의 이름을 원본처럼 PI가 아니라 임의로 변경설정이 가능하다. 실제 활용할 때 이름만 맞춰주면 그만이다.

---

2. 다른 .js파일에서 여러 데이터를 불러오기 => {} 안에 묶어서 보내기.

// pi.js

const PI = 3.141592;
function area (radius) {
  return PI * radius * radius;
}

export {PI, area};

 

// index.js
import { PI, area } from "./pi";

console.log(PI, area(10));

원본 파일에서 여러 데이터를 {}로 묶어서 한번에 보낼 때는, 받는 측에서도 원본과 같은 이름으로 써야 한다.

---

3. {} 안에서 하나씩 골라서 오는 것이 아니라 전체를 다 불러오기 => 부르는 곳에서 와일드카드 * 사용.

// index.js
import * as PI from "./pi";

위와 같이 코드를 작성하면 pi.js 파일에서 export 시킨 모든 데이터를 PI라는 이름의 객체에 담은 것이다.

그리고 객체에 담겼다는 말은, 원할 때마다 .(dot)으로 꺼내쓸 수 있다는 것이다.

즉 PI.default는 default로 export한 값, PI.area()는 area() 함수에 접근할 수 있다.(export할 파일에서 default와 {} 혼용 가능)

 

와일드카드를 사용하면 내가 원하는 것만을 깔끔하게 꺼내쓸 수 있기 때문에, 많은 Style Guide에서는 * 의 사용을 장려한다.