React | export default의 의미

자바스크립트에서 다른 페이지의 함수나 클래스 등을 불러오기 위해 Module System이 만들어졌다.

이 모듈 시스템을 이용하는 방법은 간단하게 파일 밖으로 내보낼 때는 export, 불러올 때는 import를 사용하는 것이다.

export { myFunction }

import { myFunction } from <./파일경로>

자바스크립트에서는 내보낼 수 있는 요소가 많이 있을 때는 export { 내보낼 객체명 }으로 골라서 내보내고,
export default는 내보낼 요소가 하나만 있을때 사용한다고한다.

리액트에서는 컴포넌트별로 파일을 모듈화 해놓았기 때문에 import & export를 많이 사용하는데,
그 중에서도 export 할 때 export와 export default의 차이는

export { myFunction }
import { myFunction } from <./파일경로>

export는 객체의 이름을 유지한 채 내보내고,

export default Class
import { default as Class } from <./파일경로>
import Class from <./파일경로>

export default는 객체의 이름을 임의로 설정할 수 있다고 한다.

하지만 리액트는 컴포넌트 단위로 js파일을 관리하기 때문에
하나의 클래스나 함수를 가져오면 되니 export default를 많이 사용하는 것 같다.