COCO World

[React/리액트] export 와 export default 비교 본문

Front-End/React

[React/리액트] export 와 export default 비교

코코월드주인장 2023. 2. 9. 14:25

1. export

  • named export라고도 함
  • import시 -> import export할때 객체 함수 이름
  • ex) import 선언된 이름 from '파일경로'

2. export default

  • 개발자가 원하는 이름으로 import할 수 있음
  • ex) import 원하는 이름 from '파일경로'

3. 정리

  • 한 모듈 안에 여러 가지 함수를 선언한 경우, export를, 한 모듈 안에 함수 대상이 하나이면 export default를 사용하자
  • 한 모듈 안에 여러가지 함수를 선언했을 때 export default를 선언할 경우, 협업 시 헷갈릴 수 있다
  • export 를 사용할 경우 사용한 이름을 그대로 가져오기 때문에 관련정보 파악이 쉽다
  • export default를 사용할 경우, 협업하는 팀원들끼리 명명규칙을 정하여 사용하도로 하자
const Mango = {
	cost: 5000,
}

export default Mango
export {Mango}


// main.js

// export default 로 내보낸 경우
import Apple from './index'

// export 로 내보낸 경우
import Mango form './index'