[reactJS] Export & Import (export default는 왜 할까?)

 

 

1. export default

export default 를 하면 import 에서 '어떤 이름'을 하던 그 파일에서 가져오는 건 디폴트로 설정한 것을 가져옴.

 

 

 

2. export (named export)

한 파일에서 export 하는 게 많을 경우, default 없이 export somthing, export something  함

 

 

 

3. import 

1) default가 있는 export 를 import 하는 경우

{ } 쓰지 않고 가져오는 변수를 내가 이름을 정해서 쓸 수 있음. (보통 파일명과 동일하게 감. 혼선을 피하기 위해)

e.g.

import 내가정한이름 from './my/component' // 수입

const mydata = () => `내이름: ${내가정한이름}` // 이렇게 가져와서 사용

 

 

 

2) default가 없는 export 를 import 하는 경우

📌 {} 안에 어떤 변수를 가져오는지 정확한 이름을 적어 줘야 함.
e.g.
import { export 하는 파일에서 선언된 이름 } from './my/component' // 수입
const mydata = () => `내이름: ${export 하는 파일에서 선언된 이름}` // 이렇게 가져와서 사용


📌 as 를 써서 내가 원하는 이름으로 바꿀 수도 있음
e.g. import { 사건의지평선 as 윤하 } from './orbit.js '  


📌 * as bundled 를 써서 파일 안의 모든 변수를 가져옴
e.g. import * as bundled from './ss.js'
사용할때는 bundled.data , bundled.something 으로 가져다 쓸 수 있음.