Barrel export 패턴으로 깔끔한 import 관리

를 할 수 있습니다.

https://basarat.gitbook.io/typescript/main-1/barrel

Barrel - TypeScript Deep Dive

타입스크립트 딥다이브에서도 확인할 수 있는 패턴인데

사실 유사한 형태로 관리해본 경험에서 이야기하자면 import 할 때는 행복한 대신

export 할 때 귀찮은 작업이 추가된다는 단점이 있습니다.

작성패턴은 아주 쉽습니다.

 

주로 내보내기 할 파일들이 모여있는 폴더내부에서

index.ts 파일을 생성해 준 뒤 그 파일에서 export를 한꺼번에 해주는 것을 통해

 

import 하는 입장에서는 지저분하게 경로마다 import 하는것이 아니라

index.ts에서 일괄적으로 export한 것을 받아서 사용하면 더 import 문이 깔끔하다는 것입니다.

 

물론 그런만큼 무언가 수정소요가 생기거나 추가사항이 생길 때

export 문을 작성하러 index.ts를 관리해야하는 소요가 생기게 됩니다.

일장일단이 있다라고 볼 수 있는데 저는 주로 컴포넌트 , 타입 폴더에서 많이 사용하는 것 같습니다.

그외의 부분에서는 생각보다 한파일에서 많이 import 해야하는 경우가 적다고 느끼기 때문입니다.

 

// demo/foo.ts
export class Foo {}

// demo/bar.ts
export class Bar {}

// demo/baz.ts
export class Baz {}

이러한 형태로 각각의 파일에서 관리되고 있는 녀석들을

따로따로 import 하게 되면 import 문은 총 세개가 필요합니다

// 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

하지만 이렇게 barrel export 패턴으로 관리하게되면

import { Foo, Bar, Baz } from '../demo'; // demo/index.ts is implied

이렇게 아름다운 import 문을 작성할 수 있어집니다.

 

제법 유용하지만 귀찮은 barrel export 패턴 다들 유용하게 사용하시기 바랍니다