import 중괄호 {}의 의미

import React, { render } from 'react';

 

차이점은 보내주는 export 방식의 차이라고 한다.

 

모듈을 불러올 때 import를 해주는 것처럼 해당 모듈을 다른 파일에 보내려면 export라고 명시적으로 써줘야 한다.

export 시 default를 붙인 경우 중괄호 없이 import가 가능하지만, default 없이 export한 경우, 중괄호 안에 담아 import를 해주면 된다.

만약, default 없이 export한 경우, 중괄호를 빼먹을 경우  에러가 발생한다.

 

예시.

// App.js
const react = 1;
const vue = 2;

export { react };
export const angular = 3;
export default vue;

react, vue, angular 3가지 변수에 서로 다른 형태로 선언 및 정의했다.

1. react는 {} 객체에 담아 export
2. vue는 default 키워드와 함께 export
3. angular는 선언과 초기화 동시에 export 

 

// main.js
import view, {react, angular as ANGULAR} from 'App.js'

console.log(react, view, ANGULAR); // 1, 2, 3

1. react 변수는 {} 중괄호를 사용해서 그 내부에서 import를 해야한다.
2. vue는 default 키워드와 함께 export 되었기 때문에 변수명을 변경할 수 있다. App.js에서 import 되는 변수는 무조건 vue가 되도록 기본으로 지정된 변수이기 때문에 변수명을 변경할 수 있으며 {} 중괄호가 필요 없다.
3. angular도 default 없이 export 됐기 때문에 중괄호 내에 선언해야 하는데 as 키워드를 사용해서 원하는 변수명으로 변경하여 사용할 수 있다.