ES6 에서 import { something } 과 import something 의 차이

여기 'fileA' 라고 하는 파일이 있다고 합시다. fileA 의 내용을 보시죠

var foo = 'bar';

export default foo;

export function helloWorld() { ... };

default 로 foo 라는 변수를 export 하고 있고

hellowWorld 라는 함수를 default가 아닌걸로 export 하고 있습죠

이때,  다른 파일에서

import aa from 'fileA';

이렇게 선언하면 fileA에서 default 로 선언한 foo 변수를 가져오게 됩니다.

console.log(aa) 하면 'bar' 가 나오겠죠, helloWorld 는 쓸수가 없고요

import 할때 aa 라고 적어준 저 이름은 아무렇게나 문맥에 맞게 지어주는거이므로

import hahaha from 'fileA';

라고 선언하고 console.log(hahaha) 하면 'bar' 가 나옴다.

자 그렇다면 helloWorld 함수를 쓰기위해선?

import { helloWorld } from 'fileA';

fileA 안에 내용을 조금 추가해서 만약,

var foo = 'bar';

export default foo;

export function helloWorld() { ... };

export function byeWorld() { ... };

byeWorld 까지 import 하고 싶으면,

import { helloWorld, byeWorld } from 'fileA';

이렇게 하면 되요 참 쉽죠??

Reference :

https://www.quora.com/What-is-the-difference-between-import-something-from-somewhere-vs-import-something-from-somewhere-in-ES6