[javascript] import 할 때 중괄호{} 의 유무 차이

vue나 reate 등등 예제코드 상단에 import 구문은 다음과 같이 두가지 케이스를 볼 수 있다

 

1. import { a } from '경로' 

2. import   a   from '경로'

 

어떨때 중괄호를 넣고 어떨 때 변수만 지정을 할까?

바로 export 문법에 따라 결정된다.

export 방식에는 이름을 지정해서 내보내기 방법(named)와

기본(default) 내보내기 방법이 있다.

/*유명(named) 내보내기*/
// 먼저 선언한 식별자 내보내기
export { myFunction, myVariable };

// 각각의 식별자 내보내기
// (변수, 상수, 함수, 클래스)
export let myVariable = Math.sqrt(2);
export function myFunction() { ... };



/*기본(default) 내보내기*/
// 먼저 선언한 식별자 내보내기
export { myFunction as default };

// 각각의 식별자 내보내기
export default function () { ... };
export default class { ... }

 

모듈 하나에서, 유명(named) 내보내기는 여러 개 존재할 수 있지만

기본 내보내기(default)는 하나만 가능하다.

 

따라서 javascript 모듈 하나에서 필요한 하나의 유명(named) 멤버만 import 하고 싶을 때

중괄호를 통해 import 하는 것이다.

 

모듈에서 하나의 멤버만 가져옵니다. 현재 범위 내에 myMember 이 들어갑니다.

import {myMember} from "my-module.js";

 

모듈에서 여러 멤버들을 가져옵니다. 현재 범위 내에 foo 와 bar 이 들어갑니다.

import {foo, bar} from "my-module.js";

 

기본 내보내기(default)된 export 모듈은 중괄호 없이 import가 가능하다.

import myModule from "my-module.js";

---

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export

export - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import

import - JavaScript | MDN