React에서 import할때 {}중괄호 유무의 의미!

import 시에, 궁금한 점이 생겼다.
사실 그동안 코딩하면서 이건 중괄호를 적네? 이건 안 적네? 하면서도 오류 뜨거나 안 될 때마다 지워가면서 했었는데, 그게 그간 별생각 없이 했었는데 이제서야 이유가 궁금해졌다.

최근에 실습했던 리덕스 툴킷을 가져와 봤당

import ChangeColor from "./features/color/ChangeColor";
import { Counter } from "./features/counter/Counter";

얘네둘은 같은 지위를 가진 애들인데, 하나는 중괄호를 써주고
하나는 써주지 않은 상태로 import가 되고 있다.
이유는, export default 에 있었음!

export default ChangeColor;

export function Counter() { ... }

ChangeColor는 함수를 만들고 마지막에 default 로 export 해주었고,
Counter 함수는 만듦과 동시에 default 없이 export 해주었던 것이다.
그래서 default 와 함께 export 한 ChangeColor의 경우 중괄호없이 그냥 import하지만,
default없이 export 해준 Counter 경우에는 중괄호 안에 담아 import해주면 되는 것!!

export 할 경우에는 import { 함수명 } from
export default 할 경우에는 import 함수명 from
+ 방출된 모듈의 이름과 상관없이 as를 쓰지 않고, 사용가능

https://ko.javascript.info/import-export#ref-4122