[React] export VS export default

코드를 입력하세요
import { 나의그래프ql셋팅 } from "./BoardWrite.queries";  
// export 가져오기

import BoardWriteUI from "./BoardWrite.presenter";  
// export default 가져오기

import NameChange from "./BoardWrite.presenter";  
// export default 이름 바꿔서 가져오기

import BoardWriteUI, { 나의그래프ql셋팅 } from "./BoardWrite.presenter";  
// export default와 export 함께 가져오기

import * as qqq from "./BoardWrite.styles"  
//export 한꺼번에 다 가져오기

//이런식으로 사용할 수 있음
qqq.BlueButton
qqq.RedInput

import 해올 때 중괄호 를 사용해서 데리고 오는 것이 있는가 하면, 중괄호 없이 데리고 오는 것 이 있다.

중괄호의 사용 여부는 export를 하냐 export default를 하느냐에 따라 결정된다.

export를 사용하게 되면 한 컴포넌트 내에서 여러개를 내보내기 때문에 중괄호를 사용해 필요한 것들만 import한다.

하지만 export default를 사용하게 되면 한 컴포넌트에서 한개만 내보내기 때문에 중괄호를 사용하지 않고 import한다.

한눈에 정리

💡 export vs export default

• export
  • 중괄호를 사용해서 import 해옵니다.
  • 한 컴포넌트 내에서 여러개를 내보낼 때 사용합니다.
  • import 해올 때는 export한 이름 그대로 불러와야 합니다.
  • 한번에 묶어서 import 할 시에는 import * as S from ‘경로’ 를 이용합니다.
• export default
  • 중괄호 없이 import 해옵니다.
  • import 해올 때 export 한 이름이 아니어도 괜찮습니다.
    • 한 컴포넌트에서 한개만 export했기 때문에 파일의 경로만 제대로 지정되면 이름이 어떤것이든 상관없이 잘 불러옵니다.