import 할때 중괄호 { }의 의미는 무엇일까?

Header와 Footer의 개발이 끝났기에, 오늘은 메인페이지에 들어갈 컴포넌트들을 만드는 작업을 하였다.

무탈하게 개발을 하고 있었는데...... 오늘도 역시나 오류를 만나버렸다 :)

 

 

import { TagWrapperStyled, NoLineTag } from './NoLineTag';

이 녀석이 오늘의 만난 문제의 원인!!

import NoLineTag from './NoLineTag'; 
import { TagWrapperStyled } from './NoLineTag';

이게 원래 import 구문이었는데,
똑같은 곳에서 import 해오는 건데 두 줄로 적혀 있는게 마음에 안들어서 NoLineTag도 중괄호 안에 넣어버린게 화근이었다.

 

 

 

알고보니 단순히 묶어주기만 하는 줄 알았던 저 중괄호에도 의미가 있었던 것!
하나를 import 해올 때도 중괄호를 쓰는 것도 있고 안쓰는 것도 있다는 걸 알고 있었으니 중괄호에도 큰 의미가 있다는 것을 당연히 알아채렸어야 했는데 그땐 미처 생각치 못했다.

 

 

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

 

export 시 default를 붙인 경우 중괄호 없이 import가 가능하지만,

default 없이 export를 한 경우 중괄호에 담아서 import를 하면된다.

 

 

 

💭 오늘의 생각

의미없는 것은 하나도 없다. 요소 하나하나가 무슨 의미를 가지고 있는 건지 생각해 보자.