[Clean Code] Barrel Export

1. 인사

안녕하세요. 오늘은 프론트엔드 코드를 작성하는데 있어서 알아두면 유용한 Barrel Export를 소개해보려고 합니다.

---

2. Barrel Export란?

여러 모듈의 export를 하나의 파일(index.ts or index.js)로 모아서 다시 내보내는 패턴.

---

3. Barrel Export 적용 전

필요한 컴포넌트나 함수를 가져올 때, 파일 경로를 일일이 지정해야 함(지저분해 짐)

// ex) /customer/customer.tsx
import { Button } from './components/Button';
import { Input } from './components/Input';
import { Modal } from './components/Modal';

---

4. Barrel Export 적용 후

4.1 Barrel 파일 생성

// components/index.ts
export * from './Button';
export * from './Input';
export * from './Modal';

4.2 import

// ex) /customer/customer.tsx
import { Button, Input, Modal } from './components';

지금 당장에는 눈에띄게 차이가 없다고 느끼실 수 도 있지만 만약 import하는 것이 많다고 하면 이야이가 달라질 것입니다.

---

5. 정리

어떠신가요? Barrel Export의 장점에 대해서 감이 오시나요? 물론 무분별한 Barrel Export 사용은 단점이 될 수 있습니다. 그러나, 이에 대해 적절한 사용이 무엇인지 인식하고 사용한다면 이보다 더 깔끔한 import 정리는 없을 것이라고 생각이 들기에 소개해드렸습니다.

감사합니다.