[React] import 중괄호 {}를 쓰는 이유

import a, { b } from '/config'

 

react에서 변수를 사용하려고 할 때 중괄호 {} 안에 표기하는 변수, 그리고 그냥 표기하는 변수가 있다

이렇게 import할 때 중괄호 { } 사용 여부는 변수를 보내주는 방식에 따라 달라진다

 

 

 

 

/config.js

const a = 0;
const b = 1


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

 

config.js에서 변수를 불러오려고 한다

 

 

 

 

import f, {a, c as two} from '/config';
console.log(f, a, two)	// 1, 0, 2

 

export default로 선언된 변수는 중괄호 {} 없이 받아올 수 있으며 변수명이 달라도 된다

export default b = f = 1

 

단지 export로 선언된 변수들은 중괄호 { }로 받아와야 하고, 변수명이 동일해야 한다

- 변수명을 바꾸고 싶은 경우에는 c as two 처럼 as를 이용해서 바꿀 수 있다