[ React ] React의 export와 export default 차이점 알아보기

 

 

 

SyntaxExport 구문, Import 구문 간단 정리표

Default	export default function Button() {}	import Button from './button.js';
Named	export function Button() {}	import { Button } from './button.js';

 

 

보편적으로 한 파일에서 하나의 컴포넌트만 export 할 때 default export 방식을 사용하고 여러 컴포넌트를 export 할 경우엔 named export 방식을 사용한다.

 

 

 

---

 

 

 

 

React에서 `export`와 `export default`의 차이점은 다음과 같다.

1. export

   - 여러 개의 값(함수, 객체, 원시 값 등)을 내보낼 수 있다.
   - 가져올 때 중괄호 `{}` 를 사용해야 한다.
   - 이름을 그대로 사용해야 한다 (이름 변경을 원할 경우 `as` 키워드 사용).

 

 

 

2. export default

   - 모듈 당 하나의 기본 내보내기만 가능하다.
   - 가져올 때 중괄호 `{}` 없이 사용한다.
   - 가져올 때 원하는 이름으로 자유롭게 변경할 수 있다.

 

 

 

예시코드:

// MyComponent.js
export const helper1 = () => { ... };
export const helper2 = () => { ... };
const MyComponent = () => { ... };
export default MyComponent;

// 다른 파일에서 사용
import MyComponent, { helper1, helper2 } from './MyComponent';
// 또는
import CustomName, { helper1 as customHelper1 } from './MyComponent';

`export`는 여러 항목을 내보내고 정확한 이름으로 가져와야 할 때 유용하며, `export default`는 주로 모듈의 주요 기능을 내보낼 때 사용된다.

 

 

 

`export`와 `export default` 사이의 기능적, 성능적 차이는 크지 않지만, 몇 가지 고려해야 할 점이 있다.

 

 

 

 

 

기능적 차이

트리 쉐이킹(Tree Shaking): `export`로 내보낸 항목들은 개별적으로 가져올 수 있어 트리 쉐이킹에 더 유리하다. 사용하지 않는 항목은 번들에서 제외될 수 있다.
   
재사용성: `export`는 여러 항목을 내보낼 수 있어 모듈의 여러 기능을 쉽게 재사용할 수 있게 해준다.

명시성: `export`는 가져올 때 정확한 이름을 사용해야 해서 코드의 명확성이 높아질 수 있다.

 

 

 

 

성능적 차이

번들 크기: 트리 쉐이킹 관점에서 `export`가 더 유리할 수 있으나, 실제 차이는 미미하다고 한다.
   
로딩 시간: 두 방식 모두 비슷한 로딩 시간을 가집니다. 차이가 있다면 무시할 만한 수준이다.

 

 

 

 

 

 DX

 

자동 완성: IDE에서 `export`로 내보낸 항목들은 자동 완성 기능을 더 잘 지원할 수 있다.
  

리팩토링: `export`는 이름을 변경할 때 관련된 모든 import 문을 자동으로 업데이트하기 쉽다.

결론적으로, 두 방식의 성능 차이는 거의 없다. 선택은 주로 코딩 스타일, 프로젝트 구조, 팀의 컨벤션에 따라 결정하면 된다. 큰 애플리케이션에서는 트리 쉐이킹과 코드 분할(code splitting)을 고려해 `export`를 선호할 수 있다.