보통 하나의 컴포넌트 내에는 해당 컴포넌트를 내보내는 하나의 export default 가 있다.

🐼 export default

import 받아올 때 이름을 임의로 정의할 수 있음

export default const MyComponent = () => { ... }

export default 로 컴포넌트를 export 해오면, import 할 때는 내가 원하는 이름으로 불러올 수 있다.

import mine from '../routes/MyComponent'

import 해오는 이름을 맘대로 설정이 가능하다

🐰 export (named export)

정해진 이름으로만 import 받아와야 함

export const MyComponent = () => { ... }

컴포넌트를 export default 가 아닌, 그냥 export를 하면 import는 무조건 해당 컴포넌트 이름 그대로 불러와야 한다.

import MyComponent from '../routes/MyComponent'

반드시 export한 이름으로만 import 해와야한다.

📝 Reference

https://velog.io/@navyjeongs/%EB%A6%AC%EC%95%A1%ED%8A%B8-export-default%EC%99%80-export%EC%9D%98-%EC%B0%A8%EC%9D%B4