임포트, 어셈블!

목적

약 한두 달 전, 학교 선배들의 레포지토리를 살펴보던 중 components, utils 등의 폴더 안에 공통적으로 index.ts 파일이 포함되어 있는 것을 발견했다. 궁금해서 내용을 확인해 보니, 각 파일에서 이미 export한 것들을 다시 한 번 export하고 있었다.

export { default as Header } from './Header';
export { default as Footer } from './Footer';

처음에는 왜 이렇게 번거롭게 다시 export하는지 의아했지만, 해당 파일들을 import하는 코드를 살펴보니 차이가 있었다. 기존 방식에서는 각각의 파일을 따로 import해야 했지만, 이 방식에서는 마치 구조 분해 할당을 하듯이 한 번에 불러올 수 있었다.

이후 나도 한동안 이 방법을 사용해 봤는데, 덕분에 코드가 더 간결해지고 import문도 깔끔해졌다. 그래서 오늘은 이 방법을 나만 알고 있기엔 아깝다고 생각해서, 이렇게 글로 정리해봤다.

배럴(Barrel) 패턴?

내가 위에서 말했던 방법을 배럴 패턴(Barrel Pattern)이라고 부른다. 바렐 패턴은 여러 개의 모듈을 하나의 파일에서 다시 export하여, import 문을 더 간결하게 만들어주는 패턴이다.

예제

아래와 같은 폴더 구조를 가지고 있다고 가정해보자.

src/  
│── components/  
│   │── Footer/  
│   │   ├── index.tsx  
│   │   └── style.ts  
│   │── Header/  
│   │   ├── index.tsx  
│   │   └── style.ts  
│   └── index.ts  
└── App.tsx  

배럴 패턴을 사용하지 않고 App.tsx에서 Header와 Footer를 import하면 다음과 같이 작성해야 한다.

// App.tsx
import Header from './components/Header';
import Footer from './components/Footer';

하지만 배럴 패턴을 적용하면, 약간의 추가 작업이 필요하지만 코드가 훨씬 깔끔해지는 것을 볼 수 있다.

// components/index.ts
export { default as Header } from './Header';
export { default as Footer } from './Footer';

// App.tsx
import { Header, Footer } from './components';

이렇게 하면 import 문이 더 간결해지고, 관리하기도 편리해진다.

마무리

오늘은 글이 좀 짧긴 했지만, 나만 알고 있기엔 아까운 정보라고 생각해서 이렇게 글로 정리해보았다. 개인적으로는 추가적으로 export를 또 해줘야 한다는 점을 제외하면 장점이 크다고 생각해서 앞으로도 유용하게 사용할 것 같다.