[React] React에서 import할때, 중괄호 {} 의 의미는 무엇인가??

import 문에서 궁금한 점이 생겼다.

어떤 것은 그냥 import하고, 어떤 것은 중괄호{ } 안에 변수? 를 적어준다는 것이다.

무슨 차이가 있는지 검색해봤다.

만약, 아래와 같은 코드가 있다고 해보자.  

import React from 'react';

import { render } from 'react-dom';

이 파일은 이제부터 React와 render라는 변수를 사용할 수 있다. 

React변수는 react패키지에서 불러왔고, 

render 변수는 'react-dom'이라는 패키지에서 불러왔다.

그런데, 

첫 번째는 그냥 React인데, 두 번째는 { render }처럼 괄호 안에 감싸져 있다. 

차이점은, 보내주는 export 방식의 차이였다. 

모듈을 불러올 때 import라고 써주는 것처럼, 

모듈을 다른 파일로 보내려면 export라고 명시적으로 써줘야한다. 

예를 들어보면,

App.js에서 다음과 같이 선언한다.

const a = 1;

const b = 2;

export { a };

export const c = 3;

export default b;

위와같이 App.js에서 세 가지 방식으로 export를 했다. 

변수 a는 객체에 담아서 export하고, 변수 c는 선언 및 초기화와 동시에 바로 export 했다. 

또한, 변수 b는 독특하게 앞에 default라는 키워드를 붙인 채 export했다. 

또 다른 함수 Sub.js에서 App.js에 export한 것들을 불러오려고 한다.

import d, { a, c as e } from './Example';

console.log(a, d, e); // 1, 2, 3

와 같이 작성한다.

(해석)

App.js에서 export한 값들을 불러오려면,

Sub.js에서는 코드 윗쪽에 import를 선언하면 된다.

from './App' 부분이 App.js로부터 해당 파일로 불러와 사용하겠다는 의미이다. (js는 생략해도 된다) 

 

그런데 뭔가 이상하다.

처음보는 d는 괄호 없이 불러오고, 

나머지 a, c는 괄호 안에서 불러옵니다. 또한, c는 뒤에 as e라고 되어있네요.

default는 번역하면 기본이라는 뜻이다. 

말그대로,default 로 export한 b는 괄호를 사용하지 않아도 import할 수 있습니다. 

그리고 변수명도 Sub.js에서 마음대로 지을 수 있습니다. 

위 코드에서는 변수 d가 바로 변수 b를 import한 것이다. 

나머지 a와 c는 반드시 export할 때의 이름을 그대로 import해야 하며, 괄호 안에서 불어와야 합니다.

괄호 안의 변수도 이름을 바꾸고 싶다면, as 라는 키워드를 사용해 바꿀 수 있습니다. 

c as e라고하면, 변수 c의 값을 변수 e로 넘겨주는 겁니다. 

이렇게 하면 변수 e를 c 대신 사용할 수 있습니다. 

이것은 두 개 이상의 패키지에서 같은 변수 이름을 사용해 변수가 겹칠 때, 

이름을 다르게 바꿀 수 있어 유용하다.