[React] export와 export default의 차이

export default :

컴포넌트를 다른 곳에서 사용하기 위해서 export default를 한다. 이렇게 하면 다른 곳에서 사용할 때, 중괄호 없이 가져온다.  아래의 코드는 Bucket.js라는 컴포넌트에서 App.js 컴포넌트로 보낸 예시이다. import해올 때, 중괄호가 없다는 것을 알 수 있다. 특징이 있다면, 하나만 가지고 올 수 있다는 것이다. 

-> 
Bucket.js

export default Bucket 



-> 
App.js
import Bucket from "./Bucket.js"

 

 

export :

그냥 export만 사용한 경우에는 중괄호를 통해서 가져올 수 있다. 아래에서는 Bucket.js라는 컴포넌트에서 만든 함수 withBucket를 export해주었고, 그것을 App.js에서 중괄호를 통해서 가져온 것을 알 수 있다. 그리고 export의 특징이 있다면, 여러개를 가지고 올 수 있다는 점이 있다. 

->
Bucket.js

export const withBucket = () => {
 return 1+1
}

export const bucketList = () => {
 return array
}



->
App.js

import {withBucket, bucketList} from "./Bucket"

 

---

 

그러니까, 불러올 때 중괄호를 사용하냐 안하냐, 여러개를 가지고 올 수 있냐 없냐의 차이이다.