[JS] 모듈 import/export 문법 빠르게 정리하기

[JS] 모듈 import/export 문법 빠르게 정리하기

import/export 문법 빠르게 정리하기

---

 

자바스크립트의 import, export 사용법 빠르게 정리해보겠습니다.

 

export 문은 JavaScript 모듈에서 변수, 함수, 클래스를 내보낼 때 사용

다른 파일에서 내보낸 값을 import 문으로 가져올 수 있음

 

export 사용법

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

 

📌 주의
대부분의 자바스크립트 style guide에서 클래스, 함수 선언부 앞에 export를 붙여 내보내기 시에,
선언 끝에 세미콜론 붙이지 말라고 권유

 

export문 bad/good 케이스

 

import 사용법

항목별로 불러오고 싶다면 import { ... } 

 

 

불러올 항목이 많다면 import * as <obj>

 

 

📌 주의

import할 모듈이 모두 사용할 경우가 아니라면, 사용할 항목만 불러오는게 좋음

import문 bad/good 케이스

 

why?

웹팩과 같은 빌드 툴은 로딩속도를 높이기 위해

모듈들을 모으는 번들링과 사용하지 않는 리소스를 삭제하는 최적화 작업을 수행(tree-shaking 과정)

 

이 과정에서 필요한 항목만 import시 빌드 속도 향상에 도움이 됨

 

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 사용 가능

// 📁 say.js
...
export {sayHi as hi, sayBye as bye};

 

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

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

 

export default

내보낼 개체가 한개인 경우(리엑트의 컴포넌트 클래스, 함수)

export default 를 사용하여 '해당 모듈엔 개체가 하나만 있다' 는 사실을 명확하게 나타낼 수 있음

 

// 📁 user.js
export default class User { // export 옆에 'default'를 추가
  constructor(name) {
    this.name = name;
  }
}

 

// 📁 main.js
import User from './user.js'; // { User }가 아닌 User로 클래스를 가져옴

new User('John');

 

default export vs named export

 

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

 

// 클래스 이름이 없음
export default class { 
  constructor() { ... }
}

// 함수 이름이 없음
export default function(user) { 
  alert(`Hello, ${user}!`);
}

// 이름 없이 배열 형태의 값을 내보냄
export default ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

 

하지만 그냥 export의 경우, 개체에 이름이 없을 경우 에러 발생

export class { // 에러! (default export가 아닌 경우엔 이름이 꼭 필요합니다.)
  constructor() {}
}

 

'default' name

함수를 내보낼 때 선언부와 떨어진 곳에서 default 키워드를 사용해도 동일한 효과

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

// 함수 선언부 앞에 'export default'를 붙여준 것과 동일합니다.
export { sayHi as default };

 

default export와 named export가 섞여 있을 경우

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

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

 

아래와 같은 방식을 사용하면 default export와 named export를 동시에 가져올 수 있음

 

방식 1:

// 📁 main.js
import {default as User, sayHi} from './user.js';

new User('John');

 

방식 2:

// 📁 main.js
import * as user from './user.js';

let User = user.default; // default export
new User('John');

 

default export 의 이름 관련 규칙

1. named export: export시 이름과 import시 이름이 같아야 함

import { User } from './user.js';
// import { MyUser }은 사용 X → 반드시 { User }

 

2. default export : import시 개발자가 원하는 이름 지정 가능

import User from './user.js'; // 동작
import Apple from './user.js'; // 동작
// 어떤 이름이든 에러 없이 동작