[React] import할때 {}중괄호 의미

import를 하다보면 어떤 건 그냥 import하고, 어떤 건 중괄호{ }안에 적어주기도 하고...

어떤 차이점이 있는지 정확하게 알아보기 위해 포스팅을 했다!

 

 

결론은 export 방식의 차이이다.

모듈을 불러올 때는 import를 사용하고, 모듈을 다른 파일로 보내려면 export를 명시적으로 써줘야한다.

export해줄 때 default를 붙인 경우는 중괄호 { }없이 그냥 import만 하면되고,

default 없이 export를 해준다면 중괄호 { }안에 담아서 import를 해주면 된다.

 

 

1) Color의 파일에는 export default Color가 써있다는 것을 유추할 수 있다.

2) Logo를 넣기위해 이미지 파일을 import 시켰는데 이건 export default 시키지 않아서 중괄호를 사용하지 않았다.

3) IconButton은 material에 기본적으로 있는 버튼으로, 이것도 export default 시키지 않았다.

 

import { Color } from "../../styles/Color";        --1
import Logo from "../../images/logo-white.png";    --2
import IconButton from "@mui/material/IconButton"; --3