import & export

import 

외부 스크립트 또는 외부 모듈의 export된 함수, 객체를 가져오는데 사용됩니다. import는 모든 브라우저에서 기본으로 제공되지 있지 않기 때문에, Traceur Compiler, Babel, Rollup, Webpack과 같은 별도의 트랜스파일러와 함께 사용되어야 합니다.

https://beomy.tistory.com/22

1. 문법

import name form "module-name"; 

import * as name from "module-name"; 

import { member } from "module-name"; 

import { member as alias } from "module-name"; 

import { member1, member2 } from "module-name"; 

import { member1, member2 as alias2, [...] } from "module-ame";

import defaultMember, { member [, [...]] } from "module-name";

import defaultMember, * as alias from "module-name";

import defaultMember from "module-name";

import "module-name";

name : 가져온 값을 받을 객체 이름.

member, memberN : export 된 모듈에서 멤버의 이름

defaultMember : export 된 모듈의 default 이름

alias, aliasN : export된 멤버의 이름을 지정한 이름

module-name : 가져올 모듈 이름 (파일명)

 

2. 기본구문

① 모듈 전체 가져오기 (컴포넌트 가져오기)

    export 된 모든 것들을 현재 범위(scope) 내에 myModule로 바인딩 됩니다.

    (scope 관련 내용은 [자바스크립트] 유효범위(Scope)와 호이스팅(Hoisting) 참고)

    ㄴ import myModule from "my-module.js";

② 하나의 멤버 가져오기 (react-router-dom: <Link /> )

    현재 범위 내의 myMember를 import 합니다.
    ㄴ import { myMember } from "my-module.js";

③ 여러개의 멤버 가져오기

    현재 범위 내의 foo와 bar를 import 합니다.

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

④ 다른 이름으로 멤버 가져오기

    멤버를 가져올 때 다른 이름으로 멤버를 지정할 수있습니다. export 된 멤버 이름이 길거나, 복잡할 때,

    임의의 이름으 로 멤버를 지정할 수 있습니다.
    ㄴ import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from              "my-module.js";

 

⑤ 바인딩 없이 모듈만 실행하기 (css파일 가지고 올때)

    단순히 특정 모듈을 불러와 실행만 할 목적이라면, import만 사용하는 것이 좋습니다.
    ㄴ import "my-module.js";

 

⑥ default export값 가져오기 (기본)

    default export를 통해 export 된 값들을 가져올 수 있습니다. 
    ㄴ import myModule from "my-module.js";

  [TIP] 위에서 설명한 기본 구문과 함께 사용할 수도 있습니다. 이 때, 기본 값(default export 된 값)을 가져오는

    부분이 먼저 선언되야 합니다.
    ㄴ import myDefault, * as myModule from "my-module.js"; // 또는

    ㄴ import myDefault, { foo, bar } from "my-module.js";
    ex: import React, { useState } from 'react'; (React Hook 사용할때)

 

 

Export

① Named export : 여러값을 export 하는데 유용합니다. export 된 이름을 사용하여 import 하여 사용할 수 있습니다.

    ㄴ export { myFunction };

    ㄴ export const foo = Math.sqrt(2) (객체형 변수)

    ex: function cube(x) { return x * x * x; } (함수형 변수)

         const foo = Math.PI + Math.SQRT2;

         export { cube, foo };

         위의 export된 값들을 import하여 사용할 때 아래와 같이 사용할 수 있습니다. ↓↓

         import { cube, foo } from 'my-module';

         console.log(cube(3)); // 27

         console.log(foo);// 4.555806215962888

 

② Default export : 모듈 당 딱 한 개의 default export만 있어야 합니다. default export로 객체, 함수 클래스 등이 될 수 있습니다.가장 간단하게 export 할 수 있으며, 딱 한개만 default export를 할 수 있기 때문에, "메인" 이라고 할 수 있는 것을 default export 하는 것이 좋습니다.

    ㄴ export default myFunctionOrClass // 여기에는 세미콜론이 없습니다.