Beat&Bite
PostLogWorks

React.js에서 export와 export default의 차이와 활용

2024년 10월 17일

React.js 혹은 JavaScript 애플리케이션을 개발하다 보면, export와 export default 문을 자주 사용하게 됩니다. 이 두 문은 모듈에서 코드를 내보내는 방식과 다른 파일에서 가져오는 방식에 차이가 있습니다.

모듈이란?

모듈은 프로그램의 일부분을 담고 있는 독립적인 코드 단위입니다. JavaScript에서 모듈은 보통 하나의 파일을 의미하며, 다른 파일에서 재사용할 수 있는 코드를 포함합니다.

export와 export default의 기본 규칙

export

  • 여러 개의 값(함수, 객체) 등을 내보낼 수 있습니다.
  • 가져올 때 중괄호{} 를 사용해야 합니다.
  • 이름 그대로 사용해야 합니다.

export default

  • 모듈(js 파일) 1개당 default export는 1개만 가능합니다.
  • 가져올 때 중괄호 없이 사용할 수 있습니다.
  • 원하는 이름으로 가져올 수 있습니다.

예시

export const someFunction = () => {
	//...
}

export const someVariable = 11;

export default function MyComponent(){
	//...
}

import MyComponent, {someFunction, someVariable} from './MyComponent'

상세 비교

1 .구문과 사용:

  • export: 여러 항목을 개별적으로 내보낼 수 있습니다. 각 항목 앞에 export 키워드를 붙이거나, 파일 끝에 export { item1, item2, ... }와 같이 사용할 수 있습니다.
  • export default: 파일에서 하나의 주요 기능이나 클래스를 내보낼 때 사용합니다. 보통 파일명과 동일한 이름의 컴포넌트를 내보낼 때 많이 사용합니다.
  1. 가져오기(import) 방식:
    • export로 내보낸 항목: import { item1, item2 } from './file'와 같이 중괄호를 사용하여 가져옵니다.
    • export default로 내보낸 항목: import AnyName from './file'와 같이 중괄호 없이 원하는 이름으로 가져올 수 있습니다.
  2. 재명명:
    • export: 가져올 때 import { originalName as newName } from './file'와 같이 이름을 변경할 수 있습니다.
    • export default: 가져올 때 자유롭게 이름을 지정할 수 있습니다.
  3. 사용 사례:
    • export: 여러 개의 함수, 상수, 또는 보조 컴포넌트를 포함하는 유틸리티 파일에서 자주 사용됩니다.
    • export default: React 컴포넌트를 내보낼 때 자주 사용합니다. 이는 한 파일에 하나의 주요 컴포넌트가 있다는 규칙을 따르는 경우가 많기 때문입니다.

추가 고려사항

export default와 자동완성 기능의 제한

export default를 사용할 때 자동완성 기능이 제한적일 수 있습니다.

  1. 이름의 임의성: export default로 내보낸 항목은 가져올 때 어떤 이름으로든 가져올 수 있습니다. 이로 인해 IDE가 정확한 이름을 예측하기 어려울 수 있습니다.
  2. 타입 정보의 부족: 특히 JavaScript를 사용할 때, export default는 명시적인 이름 없이 값을 내보내기 때문에, IDE가 그 값의 타입이나 구조를 정확히 파악하기 어려울 수 있습니다.
  3. 모듈 분석의 복잡성: 여러 파일에서 다양한 이름으로 default export를 가져오는 경우, 정적 분석 도구가 이를 추적하고 연결하는 데 어려움을 겪을 수 있습니다.

반면, 일반 export는 항상 특정 이름과 연결되어 있어 IDE가 더 쉽게 추적하고 자동완성을 제공할 수 있습니다.

코드 스플리팅과의 관계

코드 스플리팅은 애플리케이션을 여러 개의 작은 청크(chunk)로 나누어 필요할 때 동적으로 로드하는 기술입니다. export default와 코드 스플리팅은 이렇게 관계가 있습니다.

  1. 동적 임포트의 간편성:
const MyComponent = React.lazy(() => import('./MyComponent'));

이 코드에서 import('./MyComponent')는 MyComponent.js 파일의 default export를 가져옵니다. export default를 사용하면 이런 동적 임포트 구문이 더 간단해집니다.

  1. 청크 최적화: Webpack과 같은 번들러는 export default를 사용한 모듈을 더 쉽게 별도의 청크로 분리할 수 있습니다. 이는 각 모듈이 하나의 주요 기능만을 default로 내보내기 때문입니다.
  2. 지연 로딩(Lazy Loading)과의 호환성: React의 React.lazy()와 같은 지연 로딩 기능은 export default와 잘 작동합니다. 컴포넌트를 default export로 내보내면, 이를 쉽게 지연 로딩할 수 있습니다.
  3. 번들 크기 최적화: export default를 사용하면 특정 컴포넌트나 기능을 별도의 청크로 쉽게 분리할 수 있어, 초기 로딩 시간을 줄이는 데 도움이 됩니다.
  4. 동적 라우팅: React Router와 같은 라이브러리에서 동적 라우팅을 구현할 때, export default와 동적 임포트를 결합하여 각 라우트에 해당하는 컴포넌트를 필요할 때만 로드할 수 있습니다.

예시:

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

function App() {
  return (
    
      Loading...}>
        
          
          
        
      
    
  );
}

이 예시에서 Home과 About 컴포넌트는 각각의 라우트에 접근할 때만 로드됩니다.

결론적으로, export default는 모듈을 개별적인 단위로 취급하기 쉽게 만들어 코드 스플리팅과 지연 로딩을 구현하는 데 유리합니다. 하지만 이는 export를 사용할 수 없다는 의미는 아니며, 프로젝트의 구조와 요구사항에 따라 적절히 선택하여 사용해야 합니다.

결론

export와 export default는 각각의 장단점이 있으며, 프로젝트의 요구사항과 개발 팀의 선호도에 따라 적절히 선택하여 사용해야 합니다. export default는 모듈을 개별적인 단위로 취급하기 쉽게 만들어 코드 스플리팅과 지연 로딩을 구현하는 데 유리하지만, 자동완성과 같은 개발 도구의 지원이 제한적일 수 있습니다. 반면, export는 여러 항목을 명확하게 내보내고 가져올 수 있어 코드의 가독성과 유지보수성을 높일 수 있습니다.

TAGS
REACTJAVASCRIPTES6