[JS] Export 모듈 내보내고 가져오기

다른 파일에 있는 데이터 or 변수 or 함수 등등을 사용하기 위해서 모듈화하는데 JS에서는 과연 어떻게 모듈화 하는지 알아보자.
참조: 모던 자바스크립트

🌞Export

선언부 앞에 export 붙이기

변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다

//배열 내보내기
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

//상수 내보내기
export const MODULES_BECAME_YEAR = "2022"

//클래스 내보내기
export class User{
	constructor(name) {
    	this.name= name;
    }
}
//클래스나 함수 선언시 `;`하지마세요!

선언부와 별개로 export 붙이기

선언부와 export가 떨어져있어도 내보낼 수 있다.

function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}
export {sayHi, sayBye};

---

🌞import

무언가를 가지고 오고 싶을때, export된 파일을 가지고 오고 싶을 때 사용한다

import *

무언가를 가지고 오고 싶다면 목록을 만들어 import {...} from 모듈명 으로 넣어주면 된다.

import {sayHi, sayBye} from './say.js';

sayHi('John');
sayBye('John');

가지고 올 것이 많으면 import * as <obj>로 객체로 만들어 가지고 올 수도 있다.

import * as say from './say.js';

//say안에는 함수들이 담겨있다.
say.sayHi('John');
say.sayBye('John');

이렇게 하면 코드가 짧아져서 좋습니다. 하지만 어떤 걸 가지고 올때는 그 대상을 구체적으로 명시 하는것이 좋습니다.

import 할 때 사용할 함수나 변수를 정확하게 작성하는 이유

1. 웹팩과 같은 모던 빌드 툴은 로딩 속도를 높이기 위해 모듈들을 한데 모으는 번들링과 최적화를 수행합니다. 이 과정에서 사용하지 않는 리소스가 삭제 되기도 합니다.

간단하게 말하자면 웹팩은 빌드할 때 모듈에서 사용하지 않는 리소스들은 삭제 하는데 import * as <obj>처럼 사용하게 되면 리소스 낭비가 많다.!

---

🌞as

import 'as'

as를 사용하면 이름을 바꿔서 모듈을 가져올 수 있습니다.

// main.js
import {sayHi as hi, sayBye as bye} from './say.js'

hi('John'); //Hello, John!
bye('John'); //Bye, John!

export as

export에 as를 사용할 수 있습니다.

export {sayHi as hi, sayBye as bye}

import * as say from './say.js';

say.hi('John'); //Hello, John!
say.bye('John'); //Bye, John!

🌞export default

모듈은 크게 두 종류로 나뉩니다.
1. 복수의 함수가 있는 라이브러리 형태의 모듈
2. 개체 하나만 선언되어있는 모둘

대게는 두 번째 방식으로 모듈을 만드는걸 선호한다!? why 위에 설명했던 import할 때 함수나 변수를 정확하게 작성하는 이유와 비슷하지 않을까? 웹팩은 죄다 가지치기 하니까, 하나만 적어 놓으면 편하니까!

모듈은 export default라는 특별한 문법을 지원합니다. 이 명령어를 사용하면 해당 모듈엔 개체가 하나만 있다는 사실을 명확히 나타낼 수 있습니다.

export default class User {
  constructor(name){
    this.name = name;
  }
}

파일 하나엔 대개 export default가 하나만 있습니다.

import User from './user.js''
new User('John');

default를 붙여서 모듈을 내보내면 {}없이 모듈을 사용할 수 있습니다.

파일당 최대 하나의 default export가 있을 수 있으므로 내보낼 개체엔 이름이 없어도 괜찮다.

export default class{
  constructor() {
    ...
  	}
 }

아무 이상 없이 작동이 잘된다.

🌞정리

1. export는 모듈을 내보낼때, import는 모듈을 읽어드릴때 사용한다.
2. 사용하고자하는 모듈안에 함수 or 변수를 반드시 정확하게 함수, 변수 명으로 적어주자
3. 축약할때 or 자기가 사용하고 싶은 이름이 있으면 as명령어를 사용하자
4. export default를 잘 사용하자