[Next] 컴포넌트 import 할때 중괄호 치고 안치고의 차이 (default export vs named export)

emotion 사용하려고 Global.tsx 만들고 layout에 import 함

import { GlobalStyle } from '@/styles/Global'

 

근데 빨간줄 뜨면서 에러뜸

Module '"@/styles/Global"' has no exported member 'GlobalStyle'. Did you mean to use 'import GlobalStyle from "@/styles/Global"' instead?ts(2614)

 

철자를 틀렸나 싶어서 스펠링 틀린그림 찾기 했는데 다른점 안보인다.

뭔 말인지 모르겠어서 gpt한테 물어보니 중괄호가 문제라고 한다.

 

 

import 할때 중괄호 치고 안치고의 차이

 

export 에는 default export 와 named export 가 있다.

쉽게 말해 '하나의 값만 내보내기' vs '여러개 내보내기' 인 것이다.

이때 default export 는 중괄호를 치면 안되고

named export 는 중괄호를 꼭 쳐주어야 한다.

 

//Global.tsx

const GlobalStyle = () => <Global styles={style} />
export default GlobalStyle

 

Global.tsx 에서는 default export 방식을 사용해서

GlobalStyle 변수 하나만 내보냈기 때문에 

중괄호를 치면 에러가 나는 것이었다.