📦 Barrel Export 정리 (React / TypeScript)

1️⃣ Barrel Export란?

Barrel Export는 여러 파일에서 export한 것들을 👉 하나의 파일(index.ts)에서 모아서 다시 export하는 방식이다.

쉽게 말하면 👉 “export 모아주는 중간 집합소”

2️⃣ 왜 쓰는가?

기존 방식:

import Button from '@/components/common/button/Button'
import Input from '@/components/common/input/Input'
import Modal from '@/components/common/modal/Modal'

👉 경로가 길고 지저분함

Barrel Export 사용:

import { Button, Input, Modal } from '@/components/common'

👉 깔끔하고 유지보수 쉬움

3️⃣ 기본 구조

components/
└─ common/
   ├─ button/
   │  ├─ Button.tsx
   │  └─ index.ts
   ├─ input/
   │  ├─ Input.tsx
   │  └─ index.ts
   ├─ modal/
   │  ├─ Modal.tsx
   │  └─ index.ts
   └─ index.ts   ⭐ (Barrel)

4️⃣ 작성 방법

(1) 각 컴포넌트 폴더

// button/index.ts
export { default as Button } from './Button'

// input/index.ts
export { default as Input } from './Input'

(2) 최상위 Barrel

// common/index.ts
export * from './button'
export * from './input'
export * from './modal'

5️⃣ export 방식 이해

export default

export default Button

👉 기본 export (이름 자유)

export named

export const Button = () => {}

👉 이름 고정

Barrel에서 자주 쓰는 방식

export { default as Button } from './Button'

👉 default를 named로 바꿔서 재export

6️⃣ 장점

✅ 1. import 경로 단순화

import { Button } from '@/components/common'

✅ 2. 구조 숨김 (캡슐화)

👉 내부 폴더 구조 바뀌어도 영향 없음

✅ 3. 유지보수 쉬움

👉 export 관리 한 곳에서 가능

✅ 4. 협업에 유리

👉 팀원들이 import 규칙 통일 가능

7️⃣ 단점 (중요)

❗ 1. 너무 많이 쓰면 가독성 떨어짐

👉 어디서 온 건지 헷갈림

❗ 2. 순환 참조 위험

👉 index끼리 import하면 문제 발생

❗ 3. 트리 쉐이킹 영향 가능

👉 필요 없는 코드까지 묶일 수 있음

8️⃣ 언제 쓰는 게 좋냐

👉 이런 경우에 강력 추천

• 공통 컴포넌트 (Button, Input, Modal)
• UI 라이브러리 구조
• 디자인 시스템

👉 이런 경우는 비추천

• 비즈니스 로직 폴더
• 너무 깊은 구조
• 작은 프로젝트

9️⃣ 실무 팁

👉 보통 이렇게 규칙 잡음

• components/common → Barrel 사용
• features/xxx → 필요할 때만 사용

👉 파일 네이밍 규칙

index.ts  // Barrel 전용

🧠 핵심 정리

• Barrel Export = export 모아주는 파일
• import 경로를 단순하게 만들어줌
• 공통 컴포넌트에서 가장 많이 사용됨
• 과하게 쓰면 오히려 복잡해질 수 있음

🔥 한 줄 요약

👉 “여러 export를 하나의入口로 모아서 import를 깔끔하게 만드는 패턴”