TIL - export default vs export

항상 쓰던 export default와 export의 차이점이 헷갈려서 가볍게 정리하였습니다.

export default

src 경로에 있다고 가정

(data.js)

1번 변수 export 방법
const data = kim
export default data

또는 데이터 자체만 보낼 수 있다. 
아래는 eslint에 변수에 할당하라고 나오는거 보니 권장 되지는 않는거 같다.

export default [
	{id:1, name:kim}
   	{id:2, name:park}	
]

2번 함수 export 방법
const shopping = () =>{
retrun (
<div>하이</div>
)
}
export default shopping

(App.js)

import 방법
import name from './data.js'

...

retrun(
	<div>{name}</div>
)

1. 변수, 함수, 데이터를 내보낼 수 있습니다.
2. 딱 하나밖에 못 내 보냅니다.
3. import ??? from './data.js' 로 쓸 수 있으며 ??? 사용할 이름이며 내 마음대로 가능합니다.

export

src 경로에 있다고 가정

(data.js)

변수 export 방법
const data = kim
const dats2 = park
export {data, data2}

(App.js)

import 방법
import {data} from './data.js' 또는
import {data,data2} from './data.js'

...

retrun(
	<div>{data}</div>
    <div>{data2}</div>
)

1. 변수, 함수, 데이터를 내보낼 수 있습니다.
2. 여러개를 내보냅니다.
3. import 할 때 이름은 export할 때 이름 그대로 사용하여야합니다.
4. 추가적으로 export를 활용하여 import를 좀 더 깔끔하게 할 수 있습니다.

같은 폴더에 있는 컴포넌트들을 index.js에 import한 후 export를 써서 내보내준다.

그리고 해당 컴포넌트를 쓰는 곳에가서 import 해주는데 from뒤에 폴더까지만 써주면 된다.