TIL - 배럴 파일 구조를 통한 효율적인 컴포넌트 관리

여태까지 프로젝트를 하면서 각 컴포넌트 폴더 내에서만 index 파일을 사용하여 컴포넌트를 export 했었습니다. 예를 들어, auth 폴더에서 LoginForm과 SignUpForm을 각각 export 하기 위해 해당 폴더의 index 파일을 사용했었습니다. 이번 개인 프로젝트에서는 폴더 구조를  배럴 파일 구조로 진행해 보기로 결정하면서  배럴 파일 구조가 뭔지 학습하게 되었습니다.

 

// 이전 프로젝트에서 LoginForm을 import하는 예시
import LoginForm from '../components/auth/login/LoginForm';

 

 

이번 프로젝트에서는 모든 컴포넌트를 components/index.ts에서 중앙 집중식으로 export 하기로 결정했습니다. 이 방식은 모든 컴포넌트의 import 경로를 단순화하고, 한 곳에서 관리할 수 있게 해줍니다. 이로 인해 개발자는 컴포넌트의 정확한 위치보다는 그 기능과 역할에 더 집중할 수 있게 됩니다.

 

// 새 프로젝트에서 LoginForm을 import하는 예시
import { LoginForm } from '../components';

 

장점

1. 가독성 및 유지보수성 향상:
   • 모든 컴포넌트의 경로를 한 곳에서 관리할 수 있어 코드의 가독성이 높아집니다.
   • 컴포넌트의 import 경로가 단순해져 유지보수가 쉬워집니다.
2. 경로 오류 감소:
   • 짧고 일관된 경로를 사용하여 경로 관련 오류를 줄일 수 있습니다.
   • 컴포넌트를 찾기 위해 복잡한 디렉토리 구조를 탐색할 필요가 없습니다.
3. 프로젝트의 확장성 증대:
   • 새로운 컴포넌트를 추가할 때 기존 코드의 변경 없이 중앙 관리 파일에만 추가하면 됩니다.
   • 이는 프로젝트의 확장성을 높이고, 개발 시간을 단축시킵니다.

단점

1. 초기 설정 복잡성:
   • 중앙 집중식으로 모든 컴포넌트를 관리하려면 초기 설정 작업이 필요합니다.
   • 적절한 구조를 설정하고, 모든 컴포넌트를 올바르게 export/import하는 방식을 정립하는 데 시간이 소요됩니다.
2. 빌드 시간 증가:
   • 많은 컴포넌트를 한꺼번에 import/export할 경우, 빌드 과정에서 의존성 해석에 더 많은 시간이 소요될 수 있습니다.
   • 큰 프로젝트에서는 이러한 현상이 더 두드러질 수 있습니다.
3. 의존성 관리의 복잡성:
   • 모든 컴포넌트를 한 곳에서 관리하면 각 컴포넌트 간의 의존성을 명확히 파악하기 어려울 수 있습니다.
   • 이는 특정 컴포넌트 변경 시 다른 컴포넌트에 미치는 영향을 예측하기 어렵게 만듭니다.
4. 트리 쉐이킹(Tree Shaking) 비효율:
   • 중앙 집중식 파일에서 많은 컴포넌트를 export할 경우, 사용하지 않는 코드가 최종 빌드에 포함될 가능성이 있습니다.
   • 이는 애플리케이션의 최종 파일 크기에 부정적인 영향을 미칠 수 있습니다.
5. 가독성 저하:
   • 중앙 집중식으로 관리되는 컴포넌트들이 많아지면, 어떤 컴포넌트들이 어디에서 사용되는지 추적하기 어려울 수 있습니다.
   • 특히, 프로젝트 크기가 클 때 새로운 개발자가 참여하면 학습 곡선이 가파를 수 있습니다.

결론

중앙 집중식 Export 방식은 프로젝트의 초기 설정과 빌드 시간 증가 같은 단점에도 불구하고, 가독성과 유지보수성을 높이며 경로 오류를 줄이는 등 많은 장점을 제공합니다. 특히 프로젝트의 확장성 측면에서는 큰 이점을 제공할 수 있습니다. 그러나 의존성 관리와 트리 쉐이킹 비효율 문제를 해결하기 위한 추가적인 전략도 필요합니다. 예를 들어, 컴포넌트 그룹별로 서브 모듈을 생성하여 중앙 집중식 파일의 규모를 관리하거나, 사용하지 않는 코드를 효과적으로 제거하는 트리 쉐이킹 방법을 최적화하는 방식이 고려될 수 있습니다.

참고 사이트 
https://blog.logrocket.com/using-barrel-exports-organize-react-components/

Using barrel exports to organize React components - LogRocket Blog