Named Export (이름 있는 내보내기)

모듈에서 여러 개의 값을 이름과 함께 내보낼 수 있습니다.

// 하나 씩 내보내기
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const PI = 3.14159;

// 한 번에 내보내기
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
export { multiply, divide };

가져올 때는 중괄호를 사용하고, 정확한 이름을 명시해야 합니다.

import { add, subtract, PI } from './math.js';

이때 as를 사용해서 이름을 바꿔서 가져올 수도 있어요.

// 이름을 바꿔서 가져오기
import { add as plus } from './math.js';

Default Export (기본 내보내기)

모듈당 하나의 기본 값만 내보낼 수 있습니다.

// export default 사용하기
const Calculator = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b
};

export default Calculator;

// 직접 export default
export default function calculate() {
  // ...
}

가져올 때는 중괄호 없이, 원하는 이름으로 가져올 수 있습니다.

import Calculator from './calculator.js';
import MyCalc from './calculator.js';  // 다른 이름도 가능

혼합 사용

두 방식을 함께 사용할 수도 있습니다:

// Button.jsx
const Button = ({ children, onClick, variant = 'primary' }) => {
  return <button className={variant} onClick={onClick}>{children}</button>;
};

// 주요 컴포넌트는 default
export default Button;

// 관련 상수나 타입은 named
export const BUTTON_VARIANTS = ['primary', 'secondary', 'danger'];
export const BUTTON_SIZES = ['small', 'medium', 'large'];

주요 함수는 export default,

관련된 타입과 상수는 named export로 나눠서 사용하기도 합니다.

import Button, { BUTTON_VARIANTS } from './Button';

Barrel Export 패턴

여러 모듈을 index.js 같은 파일에 모아서 한 곳에서 내보내는 설계 패턴입니다.

기본 구조는 다음과 같습니다.

/components
├── Button.jsx
├── Input.jsx
├── Card.jsx
└── index.js 

// index.js
export { Button } from './Button';
export { Input } from './Input';
export { Card } from './Card'; 

Barrel Export패턴을 사용하면 좋은 점이 무엇일까요?

import 경로가 간결해집니다

import { Button, Input, Card } from './components';

컴포넌트를 사용 할 때 간결한 코드로 사용할 수 있습니다.

단, index.js에서는 모든 export를 명시적으로 작성해야 하죠. 라이브러리나 공용 컴포넌트처럼 여러 곳에서 사용되는 경우에는 이 패턴이 효과적이에요. 개인 프로젝트나 컴포넌트 개수가 적다면 굳이 사용하지 않아도 됩니다.

파일 구조 변경 시 코드 수정 간단

/components
  ├── buttons
  │   └── PrimaryButton.jsx
  ├── index.js 
  └── App.jsx

모듈 구조 변경 시 사용처 코드 수정이 불필요합니다.

예를 들어 PrimaryButton.jsx를 buttons 폴더에서 ui 폴더로 이동한다고 가정해볼게요.

파일을 이동하면 PrimaryButton을 사용하는 모든 파일의 import 경로를 수정해야 합니다. 10개 파일에서 사용하면 10곳 모두 수정해야 하죠.

// App.jsx
import { PrimaryButton } from './ui/PrimaryButton';  // ❌ 경로 수정 필요!

Barrel Export 있을 때는 파일을 이동해도 index.js 한 곳만 수정하면 됩니다.

// components/index.js
export { PrimaryButton } from './ui/PrimaryButton';  // 여기만 수정!

// App.jsx
import { PrimaryButton } from './components';  // 수정 불필요!

명확한 컴포넌트 관리

Barrel 패턴을 사용하면 외부에 노출할 컴포넌트를 한눈에 파악이 가능하기 때문에 명확하게 관리할 수 있습니다.

// components/index.js
export { Button } from './Button';
export { Input } from './Input';
// InternalHelper는 export 안함 → 외부에서 사용 안함

Barrel Export 패턴 사용 시 주의사항

Barrel Export 패턴은 편리하지만, 몇 가지 주의할 점이 있습니다.

export * 사용 시 Tree-shaking이 제대로 작동하지 않을 수 있습니다.

번들러가 사용하지 않는 코드를 제거(Tree-shaking)하는 데 어려움을 겪을 수 있습니다.

// ❌ 피하기
export * from './Button';

두번째는 만약 default export를 Barrel Export 패턴으로 내보낸다면 이 경우 Barrel에서 re-export할 때 문제가 생깁니다.

// hooks/index.js
export { useAuth } from './useAuth';  // ❌ 에러! useAuth는 named export가 아니라 default니까

이럴 때 default as 이름 구문을 사용해야합니다.,

// hooks/index.js
export { default as useAuth } from './useAuth';
// "default export를 useAuth라는 이름으로 내보내겠다"

선택 기준 정하기

Named export는 여러 유틸리티 함수나 상수를 제공할 때, 명확한 이름이 중요할 때 사용합니다. 특히 여러 타입을 정의할 때는 각각의 이름이 명확해야 하기 때문에 Named export가 더 좋습니다. 딱 필요한 함수만 선택적으로 가져올 수 있어 번들 크기를 줄일 수 있다는 장점이 있습니다.,

Default export을 사용할 경우는 하나의 파일에 하나의 주요 컴포넌트가 있을 때 사용합니다. 예를 들어 핵심이 되는 클래스를 내보낼 때, React 컴포넌트처럼 파일명과 export가 1:1 매칭될 때, 하나의 통합된 설정을 제공할 때 주로 사용합니다 .

Barrel export 은 컴포넌트가 여러 곳에서 사용되고, 내부 구조가 자주 변경될 가능성이 있을 때 사용합니다. 라이브러리를 만들거나 공용 컴포넌트를 관리할 때 특히 유용합니다.