[JavaScript] impot/export 개념과 최적화 하는 방법

import와  export는 JavaScript에서 사용하는 모듈들을 사용하면서 각 모듈을 가져오고 내보내는 역할을 하는  ES 모듈 명령어이다.

1. Named Module

1) export

// 경로: user.js
function name(user) {
  console.log(`${user} name : 루피`);
}

function age(user) {
  console.log(`${user} age : 15`);
}

export {name, age};

// as 사용하여 이름바꿔서 내보내기
export {name as username, age as userage};

- export로 name과 age함수를 내보낼 수 있다.

- 여러 개를 export 할 때에는 중괄호를 사용한다.

- export 할 때 as를 사용하여 이름을 바꿔서 export 할 수 있다.

2) import 

// 한꺼번에 받는법 1
import {name, age} from "./user.js"

// 한꺼번에 받는법 2
import * from "./user.js"

// 한개만 받는법
import {name} from "./user.js"

// 이름을 바꾸는 법
import {name as username} from "./user.js"

name("A")
age("C")
username("D")

- import로 name과 age를 받는다.

- 이때 export한 이름을 동일하게 사용하여야 하고 중괄호를 사용해야 한다.

- 만약 다름 이름으로 모듈을 받고 싶다면 as를 사용하여 별칭을 사용할 수 있다.

2. default export 

- export default는 모든 함수를 갖고있는 한 개의 객체를 내보내는 방법이다. 

1) export 

// 경로" ./user.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

2) import

import User from './user.js'; // {User}가 아닌 User로 클래스를 가져왔습니다.

new User('루피');

 

- default export된 모듈을 import 할 때에는 중괄호를 사용하지 않아도 된다.

- default export는 export 한 이름이 아닌 원하는 다른 이름을 사용하여 import 할 수 있다.

- 따라서 모듈 이름을 헷갈리지 않게 잘 지어주고, 폴더 트리와 프로젝트 구성을 잘해야 한다.

3) default export 일 때  모든 함수를 한꺼번에 export 하기

- 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};

- import

import math from "./math.js";

math.minus(3,1);

 

3.  named export 와 default export 혼용

- 두 가지 방법을 하나의 모듈에 같이 사용할 수 있다. 

// 경로: ./user.js
const countUser = (count) => {count++};
export getuserName = (user) => {`${user}: 루피`};
const export default countUser;

import countUser, {getUserName} from "./user.js"

 

4. 모듈 다시 내보내기(re-export)

- 아래는 import 와 export를 공보 하던 준 모던 자바스크립트 페이지에서 본 내용이다.

- export ... from... 을 사용하면 가져온 모듈을 즉시 다시 내보낼 수 있다. (re-export) 

export {sayHi} from './say.js'; // sayHi를 다시 내보내기 함

export {default as User} from './user.js'; // default export를 다시 내보내기 함

 

- 위와 같은 방법을 사용하면 import한 즉시 다른 이름으로 바로 re-export 할 수 있다.

- 실무에서 npm을 통해 공개할 패키지가 있고 해당 패키지엔 여러 모듈들 중 외부 개발자에게 노출되면 안 되는 모듈이 있을 때 사용하는 방법이라고 한다.

- 패키지를 사용할 때 외부 개발자가 패키지 안의 파일을 보고 내부 구조를 바꿀 수 없도록 공개할 모듈만 import하여 바로 export 하고 나머지 모듈을 숨기는 방식을 사용하면 된다고 한다. 

 

솔직히 무슨 말인지 이해가 잘안되긴 하지만... 결국 공개되면 안 되는 패키지들을 보다 보안성을 높이고 싶다면 re-export 방식을 사용하면 될 것 같다.

 

* re-export에는 주의해야할 점이 있다.

- default export를 다시 내보내려면 export {default as User}를 사용해야 한다.

- export * from "./user.js"를 사용하여 한꺼번에 re-export 한다면 default export는 무시되고, named export만 re-export 된다.

- 따라서 default export와 named export를 동시에 re-export 하고 싶다면 다음과 같이 입력해야 한다.

export * from "./user.js";
export {default} from "./user.js";

 

 

5. dynamic export

- import와 export의 특징은 중괄호(객체) {} 안에서는 동작하지 않는다는 점이 있다.

- 따라서 조건에 따라 모듈을 import하거나 export 하기 위하여 if 문이나 addEventListener의 괄호 안에 import문이나 export 문을 사용하면 오류가 발생한다.

- 이때 사용하는 방식이 비동기 방식을 사용한 dynamic export이다.

- async/await과 같이 비동기 방식을 사용하여 btn을 클릭 했을 때 math모듈을 import 할 수 있다.

async function getMath() {
	const math = await import("./math");
    user.mines(3,1)
}
btn.addEventListener("click", getMath);

 

 

6.  export와 import 최적화하는 방법

1) 필요한 것만 import 한다.

- export default를 사용하면 필요없는 모듈 또한 import 해야 한다. 따라서 함수가 하나 있을 때는 default export를 사용해도 괜찮지만 여러 함수가 있는 객체에서 1가지 혹은 소수의 함수를 import 해야 할 때에는 named export를 사용하여 필요한 import만 가져온다.

2) dynamic export를 사용한다.

- 웹사이트는 로딩 할때에 import 문을 전부 실행한다. 그래서 많은 import / export 사용은 로딩 속도를 늦춘다.

- 특정 상황에서만 쓰이는 export와 import는 dynamic export를 사용하여 특정 상황에서만 export / import 가 될 수 있게 하여 최적화할 수 있다.