[React] export와 export default의 차이점

자바스크립트의 모듈시스템을 이용하는 방법으로 내보내기 export, 불러오기 import를 사용

※ 모튤시스템 : 다른 페이지의 함수나 클래스를 불러와 사용

 

01

export

1. 여러 개의 객체(함수, 클래스, 변수)가 있는 라이브러리 형태의 모듈
2. 특정개체만 내보내기가 가능
3. import 할 때 별칭이 불가능(객체의 이름을 유지해야 함)
4. import 할 때 불러올 개체를 { } 로 감싸줘야 함

예)

export { myFunction }

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

 

 

02

export default

1. 해당 모듈에 하나의 객체만 존재할때
2. import 할때 별칭으로 불러올 수 있음(객체의 임의의 이름 사용 가능)

예)

export default Class

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

import Class from <./파일경로>

 

리액트는 컴포넌트 단위를 js로 관리하기 때문에

대부분 하나의 클래스나 함수를 가져오기 때문에 export default를 많이 사용하게 된다.