자바스크립트에서 import 사용할 때 중괄호 사용하는 경우

개요

자바스크립트에서 import 구문을 통해 모듈을 불러올 때 중괄호 {...}를 사용하는 경우와 사용하지 않는 경우가 있다. 이 둘의 차이는 해당 모듈이 어떻게 내보내졌는지(export)에 달려있다.

ES6 모듈 시스템에는 두 가지 주요 내보내기 방식이 있다. 이 두 가지 내보내기 방식을 알아보고, 어떤 경우에 중괄호를 사용하면 되는지 알아보도록 하자.

기본 내보내기(Default Export)

기본 내보내기는 모듈에서 하나의 값을 기본으로 내보내는 방식이다. 이 값을 가져올 때는 중괄호를 사용하지 않는다.

// module.js
const myFunction = () => {
  console.log('Hello from myFunction');
};

export default myFunction;

// main.js
import myFunction from './module.js';

myFunction();

명명된 내보내기(Named Exports)

명명된 내보내기는 모듈에서 여러 값에 각각의 이름을 붙여 내보내는 방식이다.

이 값을 가져올 때는 중괄호를 사용해야 한다.

// module.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './module.js';

console.log(add(2, 3));       // 5
console.log(subtract(5, 2));  // 3

혼합 내보내기

기본 내보내기와 명명된 내보내기를 동시에 사용해도 무방하다. 다만 이 경우에도 불러올 때의 규칙은 지켜줘야 한다.

// module.js
const multiply = (a, b) => a * b;

const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

export { add, subtract };
export default multiply;

// main.js
import multiply, { add, subtract } from './module.js';

console.log(multiply(2, 3));  // 6
console.log(add(2, 3));       // 5
console.log(subtract(5, 2));  // 3

결론

모듈을 불러올 때 중괄호를 사용하는 경우는 Named Export를 했을 때고, 중괄호를 사용하지 않는 경우는 Default Export를 했을 때다.