import, export

리액트

• React에서 import할때, 중괄호 {} 의 의미는 무엇인가??
  :https://codingmania.tistory.com/333

import React from 'react';
import { render } from 'react-dom';

(App.js)
const a = 1;
const b = 2;
export { a };
export const c = 3;
export default b;

(Sub.js)
import d, { a, c as e } from './App';
console.log(a, d, e); // 1, 2, 3

• d는 괄호 없이 불러오고, 나머지 a, c는 괄호 안에서 불러옵니다. 또한, c는 뒤에 as e라고 되어있네요.
• d :: default는 번역하면 기본이라는 뜻이다.
  말그대로, default 로 export한 b는 괄호를 사용하지 않아도 import할 수 있습니다.
  그리고 변수명도 Sub.js에서 마음대로 지을 수 있습니다.
  위 코드에서는 변수 d가 바로 변수 b를 import한 것이다.
• a, c :: a와 c는 반드시 export할 때의 이름을 그대로 import해야 하며, 괄호 안에서 불어와야 합니다. 괄호 안의 변수도 이름을 바꾸고 싶다면, as 라는 키워드를 사용해 바꿀 수 있습니다. c as e라고하면, 변수 c의 값을 변수 e로 넘겨주는 겁니다.
  이렇게 하면 변수 e를 c 대신 사용할 수 있습니다.
  이것은 두 개 이상의 패키지에서 같은 변수 이름을 사용해 변수가 겹칠 때,
  이름을 다르게 바꿀 수 있어 유용하다.

JS

https://ko.javascript.info/import-export
요약
지금까지 배운 export 타입을 다시 한번 살펴봅시다.
아래 타입들을 쭉 보고 얼마나 기억하는지 체크해 보세요.

• 클래스, 함수 등의 선언부 앞에 export 붙여서 내보내기:
  export [default] class/function/variable ...

• 이름 없는 개체 내보내기:
  export {x [as y], ...}.

• 다시 내보내기:
  export {x [as y], ...} from "module"
  export * from "module" (default export는 다시 내보내 지지 않음)
  export {default [as y]} from "module" (default export를 다시 내보냄)

• named export 가져오기:
  import {x [as y], ...} from "mod"

• default export 가져오기:
  import x from "mod"
  import {default as x} from "mod"

• 한 번에 가져오기:
  import * as obj from "mod"

• 모듈을 가져오긴 하지만(코드는 실행됨), 변수에 할당하지 않기:
  import "mod"