JS import export 완벽 정리

자바스크립트 모듈

: 특정 애플리케이션을 이루는 파일 하나. 즉, js 파일 하나 하나를 모듈이라고 함

: 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성

 

- 모듈 불러오기

: 모듈 내에서 외부로 공개할 함수나 변수 등을 export 문을 통해 공개

: 다른 모듈을 불러올때는 import 문으로 로드

 

 

 

 

 

export (내보내기) 방법

- Named exports

: 여러 값을 내보낼때 유용
: import 할 때 import { 함수명 } from .. 형식으로 불러와야함

: 모듈 내 모든 함수를 불러오려면 import * as 이름 from 형식으로 불러와야함

const arrs2 = [100, 200, 300, 400];
function getName() {
    return "aaaaaaaaa";
}

export const arrs = [10, 20, 30, 40]; // 개별로 선언해서 export

export { arrs2, getName }; // 묶어서 export

 

- Default exports

: 모듈 내 메인으로 호출되어야 하는 단 하나의 객체, 함수, 클래스 등

: import 함수명 from .. 형식으로 불러와야함

: import * as 형식 필요없이 모듈 내 함수를 부를 수 있음

let cube = function cube(x) {
    return x * x * x;
}

const ABC = '123';

export default cube;
// export default { cube, ABC } 형식으로 사용하여 import module1 from .. 형식으로 호출 가능

 

 

 

 

import (들여오기) 방법

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

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

 

- import { ... } from ...

import {sayHi, User} from './user.js';
// export 한 항목을 가져옮
// 모든 항목을 가져올때는 improt * as from ...

 

- import Custom from ...

import User from './user.js'; // 동작
import MyUser from './user.js'; // 동작
// 어떤 이름이든 에러 없이 동작합니다.

// 모듈 내 함수를 호출할때는 아래와 같이
// User.sayHi();

 

 

 

 

 

export와 export default 둘 중 무엇을 사용해야할까?

- export

: 한 모듈 내에서 여러 변수, 클래스, 함수 등을 내보낼때 유용

: 어떤 모듈에서 특정한 항목만 필요한 경우 그 항목만 import {} from 하여 간단하게 사용

: import * as 모듈명 으로 모듈 내 모든 항목을 가져올 수 있기도함

 

- export default

: 한 모듈 내에서 하나의 변수, 클래스, 함수 등을 내보낼때 유용

: 모듈의 이름을 따로 지정해서 들여올 수 있음 (named export도 as문으로 할 수 있음)

 

- 결론

: 하나만 export 해야하는 경우 export default

: 여러 개를 export 해야하는 경우 export

 

 

 

 

 

Reference

[JS] 📚 모듈 사용하기 import / export 완벽 💯 정리

모듈 내보내고 가져오기

export, export default 차이가 뭐죠?

default export와 named export 차이점