Barrel export 패턴으로 import 깔끔하게 정리하기,react 리팩토링,가독성 높이기,index로 파일관리하기

포스터

 

개발를 하다보면 코드가 길어지는 데 그러면 어느순간 코딩하는게 불필요한 에너지를 소모하게 된다.

그럼 당연하게 생산성 저하로 이어진다.

자연스럽게 효율적인 방법을 생각하고 구글링 하게 된다.

import 부분을 불러오다 보면 길어지는데 템플릿을 보다가 발견한 방법이다.

오늘 방법은 mui 템플릿을 쓰다가 발견한 방법이다.

 

 

패턴이름 알게된 방법

사실 이 방법이 어떤 이름인지 몰라 gpt한테 물어봤더니 역시 똑똑하게 답변을 줬다.

 

GPT 답변

React 프로젝트에서 여러 컴포넌트를 한 줄로 깔끔하게 정리하여 불러오기 위해 index.js 파일을 사용합니다. 이를 통해 여러 컴포넌트를 한 파일에서 한꺼번에 불러올 수 있어 코드의 가독성과 관리가 쉬워집니다. 이런 작업을 "통합 파일" 또는 "배럴 파일(barrel file)"이라고 합니다.

 

사용예시

1. 컴포넌트 파일 구조

src/
  components/
    Button.js
    Header.js
    Footer.js
    index.js

 

2. 배럴 export 패턴 전 컴포넌트 사용 예시

// src/App.js
import React from 'react';
import Button from './components';
import Header from './components';
import Footer from './components';

const App = () => (
  <div>
    <Header />
    <Button />
    <Footer />
  </div>
);

export default App;

 

이렇게 불필요하게 코드가 길어진다. 당장이라도 어떻게든 짧게 줄이고 싶은 욕구 샘솟지 않나요 ?? ㅋㅋ

 

 

2. index.js 파일 생성 및 컴포넌트 통합

// src/components/index.js
export { default as Button } from './Button';
export { default as Header } from './Header';
export { default as Footer } from './Footer';

 

3. 컴포넌트 사용 예시

이제 다른 파일에서 컴포넌트를 불러올 때, 개별 파일에서 직접 불러오는 대신 components/index.js를 통해 한 번에 불러올 수 있습니다.

// src/App.js
import React from 'react';
import { Button, Header, Footer } from './components';

const App = () => (
  <div>
    <Header />
    <Button />
    <Footer />
  </div>
);

export default App;

 

barrel export 패턴을 사용하므로 불필요한 코드 2줄이 깔끔하게 사라졌다.

덤으로 딱봐도 {} 사이에 있는 파일들이 components에서 관리되고 있구나 라는 인식을 줘서 가독성까지 올라갔다.

모든일에 일장일단있듯이

barrel export 패턴에도 치명적인 단점이 존재합니다.

바로 새로운 컴포넌트 파일을 만든다고 가정 했을 때

그 파일을 관리하고 있는 index.js 파일에 추가해야하는 번거로움이 존재합니다.

 

단점 예시

Title 이라는 컴포넌트가 예시가 있습니다.

// src/App.js
import React from 'react';
import { Button, Header, Footer } from './components';
import Title from'./components';

const App = () => (
  <div>
    <Header />
        <Title />
    <Button />
    <Footer />
  </div>
);

export default App;

 

index 파일에 추가를 안하게 되면 위에 코스 예시처럼 되니 주의해서 꼭 추가하세요.

 

배럴 파일을 사용하면 코드의 가독성과 유지보수성이 향상되지만 코드를 추가 해야하는 단점도 존재합니다. 따라서 프로젝트의 규모와 특성에 따라 배럴 파일 사용을 적절히 결정하는 것이 중요합니다. 배럴 파일을 사용할 때는 실제 필요한 모듈만 불러오는지 주의하고 제대로 동작하는지 확인하는 것이 좋습니다.

 

 

리액트 바텀시트 구현

React에서 바텀시트(Bottom Sheet) 구현하기: 상세 가이드