[Javascript] import 문의 중괄호 {} 의미는?

 

클래스형 컴포넌트를 사용할 땐 위와 같이 component 를 중괄호로 감싸서 호출합니다. 반면에 React 를 import 할 땐 중괄호가 필요없는데, 둘의 차이가 궁금합니다.

import React, {Component} from 'react';

 

 

 

export 방식의 차이

정답부터 말하면 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 했습니다. 

 

 

그리고 App.js 에서 정의된 3가지 변수를 main.js 에서 불러오겠습니다.

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


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

 

위의 순서 1)  2)  3) 대로 설명해보겠습니다.

 

1) react 변수는 {} 중괄호를 사용하여, 그 내부에서 import 해야 합니다. 

 

2) view 변수는 어디서 나온 것일까요? 바로 vue 를 view 라고 명명한 것 뿐입니다. view 가 아니라 skyview 라고 해도 상관없습니다. 중요한 것은 App.js 에서 vue 변수에 default 키워드를 붙여 export 했다는 점입니다.  이 default 키워드가 붙은 변수는 App.js 에서 기본으로 지정한 변수이기 때문에, ... from 'App.js' 구문에서 import 되는 변수는 무조건 vue가 되는 것입니다. 무조건 vue 로 고정 돼 있기  때문에 어떠한 이름 (ex. view, skyview 등) 으로도 선언될 수 있고, {} 중괄호도 필요 없게 됩니다. 반대로 생각하면 default 가 붙지 않은 변수는 {} 중괄호를 사용하여 import 해야한다는 뜻이기도 합니다.

 

3) angular 역시 default 없이 export 됐기 때문에 중괄호 내에서 선언해야 합니다. 그런데 as 라는 키워드가 붙고, 그 뒤에 ANGULAR 라는 대문자도 붙은 것을 볼 수 있는데, 바로 angular 변수의 alias 를 지정한다는 의미입니다. 꼭 대문자(ANGULAR) 로 선언할 필요는 없고, 본인이 원하는 변수로 선언할 수 있습니다. alias 기능이 있는 이유는, 서로 다른 패키지에서 같은 변수 이름을 사용하는 경우가 생길 수 있기 때문입니다.

import {angular as ANGULAR} from 'App.js';
import {angular as ANGULAR2} from 'App2.js';