[javascript 자바스크립트] import 할때, 중괄호{} 가 있고 없고의 차이란?

 

 

 

최근 리액트 공부를 할 때나 타입 스크립트, 자바스크립트를 사용하면서 모듈이나 라이브러리를 불러올 때

아래와 같이 import를 사용 하곤 한다.

근데 아래 예시를 보면 알겠지만 , React는 중괄호{} 로 감싸지 않고, 나머지는 감싸서 쓰는데 둘의 차이는 뭘까?

import React, { useEffect,useState } from 'react'

 

정답은 받아오는 모듈에서 보내주는 export 방식의 차이다.

아래 예시를 보면서 이해해보자.

 

먼저 app.js 라는 파일을 만들고 아래처럼 선언해준다.

// app.js

const a = 1;
const b = 2;
export {a};
export const c = 3;
export default b;

 

app.js 코드를 보면 3가지 방식으로 export를 해줬다.

a는 객체(중괄호{})에 담아서 export를 해줬고,

변수 c는 선언을 해주고 초기화를 시켜줌과 동시에 export 해줬다.

b는 앞에 default라는 키워드를 붙여서 export해줬다.

 

이제 위 app.js를 import 해서 사용하는 main.js를 아래와 같이 작성해보자.

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

 

 

main.js에서 app.js를 사용하기 위해 import ~ from './app'을 해준다.(뒤에. js는 생략 가능하다.)

근데 우리가 app.js에서 선언하지 않았던 d와 e가 보일 것이다. 자세히 알아보자.

 

설명을 해보면,

app.js 안에서의 export default b라는 말은 'app.js의 기본(default) export는 b 야'라는 의미이다.

그래서 main.js에서 import 아무 변수명 from './app'을 하면 '아무 변수명'에 b의 값이 값이 들어가게 된다.  

b는 app.js의 default export이기 때문에 아무 변수명을 마음대로 지어서 사용할 수 있다.

 

 

다음 { a, c as e}를 보자.

default가 b였기 때문에 a, c는 default가 아니다.

app.js 에서 export 할 때의 변수명(이름)을 그대로 import 해야 하고, 중괄호{}로 묶어서 사용해야 한다.

변수명(이름) 또한 b처럼 아무 변수명을 사용할 수 있는 것이 아니라, 변수명을 바꾸고 싶으면 위에 { a, c as e }처럼  as 키워드를 이용해서 바꿔야 한다. (c를 e로 사용한다.)

 

 

그래서 결과적으로 보면

a는 1,

d는 b값을 import 하기 때문에 2,

e는 c값을 import 하고 e로 변수명을 바꿔준 것이기 때문에 3 이 된다.