필요한 여러가지 모듈들을 하나의 모듈로 통합해주는 패턴입니다.
여러 import 모듈들을 하나의 파일에서 re-export 하여 여러 줄의 import 라인을 하나의 라인으로 줄여주는 효과가 있습니다.
// demo/foo.ts
export class Foo {}
// demo/bar.ts
export class Bar {}
// demo/baz.ts
export class Baz {}배럴 패턴을 사용하지 않을 때는 위의 모듈들을 다음과 같이 개별적으로 import 합니다.
import { Foo } from '../demo/foo';
import { Bar } from '../demo/bar';
import { Baz } from '../demo/baz';대신 배럴 패턴을 사용하여 demo/index.ts 파일에 다음 라인을 입력합니다.
// demo/index.ts
export * from './foo'; // re-export all of its exports
export * from './bar'; // re-export all of its exports
export * from './baz'; // re-export all of its exports이제 다음 한줄의 import 로 모든 모듈을 사용할 수 있습니다.
import { Foo, Bar, Baz } from '../demo'; // demo/index.ts is implied원문 해석 : https://basarat.gitbook.io/typescript/main-1/barrel
참고 블로그
https://xionwcfm.tistory.com/392
https://medium.com/@denisultanoglu/using-barrel-pattern-in-react-typescript-projects-e8e855730182