새로운 팀 프로젝트를 시작하게 되어 프론트엔드 팀원과 코드 컨벤션을 짜던 도중 Barrel Exports 패턴을 사용하시냐는 질문을 받았는데, 그게 뭔지 몰라 답을 못 했다.
Barrel?
A barrel is a way to rollup exports from several modules into a single convenient module. The barrel itself is a module file that re-exports selected exports of other modules.
출처: TypeScript Deep Dive
정리하자면 Barrel은 컴포넌트나 스타일을 import 할 때 사용하는 여러 줄의 import 구문을 보기 편하게 정리하는 방식이다.
사용 예시
아래의 컴포넌트들을 전부 가져와야 하는 상황을 가정해 보자.
src/
components/
foo.ts
bar.ts
foo-bar.ts기존 방식대로 컴포넌트를 사용한다면 아래와 같이 코드를 작성해야 한다.
import FooComponent from 'src/components/foo';
import BarComponent from 'src/components/bar';
import FooBarComponent from 'src/components/foo-bar';으악! 못생겼어!
Barrel 패턴을 사용하려면 먼저 index.ts 파일을 생성해 해당 파일에 컴포넌트들을 정리해 놓는다.
export * from './src/components/foo';
export * from './src/components/bar';
export * from './src/components/foo-bar';그리고 필요한 파일에서 컴포넌트들을 아래와 같이 불러오면 끝~
import { FooComponent, BarComponent, FooBarComponent } from '../components';우와너무쉽다~
같은 방식으로 css 파일 또한 관리할 수 있다.
https://velog.io/@yellow_j/프로젝트-폴더-구조-Barrel-Exports-Pattern
장점
기존 방식을 사용하면 import한 모듈이 수정될 때마다 모듈이 import 된 곳을 찾아가 일일이 수정해 주어야 한다.
하지만 Barrel 패턴을 사용하면 index.ts 파일에 export된 모듈만 수정해 주면 되니 우와너무너무편하다~
단점
대신 단점이라면 index.ts 파일에서 관리를 하다 보니 새 컴포넌트 파일을 만들 때마다 해당 컴포넌트들이 관리되고 있는 index.ts 파일에 export 문구를 추가해 주어야 하긴 한다.
나보다 개발 경험이 많은 팀원과 2인 1조가 되어 프론트엔드 작업을 하게 되면서 내게 부족한 부분들을 깨닫고 배우고 있다. 아직 작업 초기인만큼 부족한 부분을 빨리 채워 프로젝트에서 1인분을 할 수 있도록.. 노력하자..!
참고
Do a barrel export
TypeScript Deep Dive
Barrel export 패턴으로 import 깔끔하게 정리하기,react 리팩토링,가독성 높이기,index로 파일관리하기
