import *

무언갈 가져오고 싶다면 아래와 같이 이에 대한 목록을 만들어 import {...} 안에 적어주면 됩니다.

// main.js
import { sayHi, sayBye } from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

가져올 것이 많으면 import * as <obj> 처럼 객체 형태로 원하는 것들을 가지고 올 수 있습니다.
예시를 살펴보겠습니다.

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

say.sayHi('John');
say.sayBye('John');

이렇게 한꺼번에 모든걸 가져오는 방식을 사용하면 코드가 짧아집니다.
그런데도 어떤걸 가져올 땐 그 대상을 구체적으로 명시하는 게 좋습니다.

이렇게 하는 데는 몇 가지 이유가 있습니다.

1. 웹팩(webpack)과 같은 모던 빌드 툴은 로딩 속도를 높이기 위해 모듈들을 한데 모으는 번들링과 최적화를 수행합니다.
   이 과정에서 사용하지 않는 리소스가 삭제되기도 합니다.

   아래와 같이 프로젝트에 서드파티 라이브러리인 say.js를 도입하였다고 가정합시다.
   이 라이브러리엔 수 많은 함수가 있습니다.

   // say.js
   export function sayHi() { 
       //... 
   }
   export function sayBye() { 
       //... 
   }
   export function becomeSilent() { 
       //... 
   }
   

   현재로선 say.js의 수 많은 함수 중 단 하나만 필요하기 때문에, 이 함수만 가져와 보겠습니다.

   // main.js
   import { sayHi } from './say.js';
   

   빌드 툴은 실제 사용되는 함수가 무엇인지 파악해, 그렇지 않은 함수는 최종 번들링 결과물에 포함하지 않습니다.
   이 과정에서 불필요한 코드가 제거되기 때문에 빌드 결과물의 크기가 작아집니다.
   이런 최적화 과정은 가지치키(tree-shaking)라고 불립니다.

2. 어떤 걸 가지고 올지 명시하면 이름을 간결하게 써줄 수 있습니다.
   say.sayHi() 보다 sayHi()가 더 간결하네요.

3. 어디서 어떤게 쓰이는지 명확하기 때문에 코드 구조를 파악하기가 쉬워 리팩토링이나 유지보수에 도움이 됩니다.