JS Import

 

 

무지성으로 import를 남발하던 어느날...

문득 궁금해 졌다. 

 

왜 어떤 import는 { }를 섞어서 쓰는 걸까?!

 

 

오늘은 그 이유를 알아보자.

 

 

import {Something} from somelib

 

우선 Curly Bracket은 라이브러리 내에 특정 모듈 혹은 무언가를 불러온다는 의미가 있다. 

 

예를들어 'somelib' 라이브러리 안에, 'Something', 'Anything'이라는 모듈이 있다면

 

위의 경우 그 중 'Something'만을 import한다는 의미다. 

 

만약 둘 다 불러오고 싶다면, import {Something, Anything} from somelib이라고 하면 된다. 

 

이 때 export하는 스크립트에서는 export Something() 혹은 export Anyhting() 등과 같이 

 

export로 설정이 된다. 

 

 

import Something from somelib

 

반면에 Curly Bracket이 없는 import는 Default로 설정된 모듈 혹은 무언가를 import한다는 의미를 가진다. 

 

보통은 리엑트에서 컴포넌트를 import하기 위해 자주 사용되는데, 

 

export하는 스크립트에서 export default 라고 설정된 모듈은 

 

Curly Bracket 없이 import하면 defualt이외의 다른 것들은 import되지 않는다.