[React] 하나의 index.ts에서 import 및 export 하기

큰 React 프로젝트를 구성할 때 코드의 관리와 가독성을 높이기 위해 각 디렉토리별로 index.ts 파일을 활용하는 전략이 많이 사용된다.

 

이 방식을 활용하면 여러 모듈을 효과적으로 관리하면서, 프로젝트의 구조를 조금 더 확실하게 해주어 이번 프로젝트에 도입하게 되었다.

 

이렇게 했을 때 가지는 이점은 아래와 같다.

 

1. 깔끔한 임포트

디렉토리 내에 위치한 index.ts 파일은 외부에서 해당 디렉토리를 지칭하는 이름만으로 모듈을 임포트할 수 있게 해줌으로써 비교적 간단해진다.

 

기존에 사용하던 방식에서는 상대 경로가 더 길어질 수 있는데 반해, index.ts 파일을 사용하면 import 구문이 조금 더 깔금해지고 관리하기 쉬워진다.

// index.ts가 없는 경우
import { ChannelWidget } from '../../widgets/ChannelWidget/ui/ChannelWidget';

// index.ts가 있는 경우
import { ChannelWidget } from '../../widgets/ChannelWidget';

 

실제 프로젝트에서는 아래와 같이 활용하고 있다.

import { ChannelPicker } from "@/widgets/ChannelPicker";
import { MemberList } from "@/widgets/MemberList";
import { DocumentList } from "@/widgets/DocumentList";
import { ChatroomList } from "@/widgets/ChatroomList";
import { VoiceroomList } from "@/widgets/VoiceroomList";
import { ChannelInfo } from "@/widgets/ChannelInfo";
import {
  ChannelContainer,
  ChannelPickerContainer,
  MainContentContainer,
} from "./ChannelStyles";
import useStore from "@/features/channel/model/store";

export const ChannelWidget: React.FC = () => {
  const { currentChannel } = useStore((state) => ({
    currentChannel: state.currentChannel,
  }));

  return (
    <ChannelContainer>
      <ChannelPickerContainer>
        <ChannelPicker />
      </ChannelPickerContainer>
      <MainContentContainer>
        {currentChannel && <ChannelInfo />}
        <MemberList />
        <DocumentList />
        <ChatroomList />
        <VoiceroomList />
      </MainContentContainer>
    </ChannelContainer>
  );
};

export { ChannelPicker } from "./ui/ChannelPicker";

export { MemberList } from "./ui/MemberList";

 

2. 관심사의 분리

 

index.ts 파일은 ui, model, hooks 같은 다양한 구성 요소를 명확하게 분리함으로써 각 요소가 독립적으로 기능하도록 한다.

특히 많은 임포트를 관리해야 할 때 코드의 가독성을 높이는 데 도움이 된다.

 

자료를 찾다 보니 좋은 점만 있는 줄 알았는데, 안 좋은 점도 있었다.

 

아래 글에서는 컴포넌트 이름을 찾기 힘듬과 index.ts 파일 수가 너무 많아짐을 근거로 마구잡이식 index 파일 생성을 비판하고 있다.

 

컴포넌트의 관심사 분리에 대한 고민

컴포넌트의 관심사 분리에 대한 고민

 

특히 컴포넌트는 재사용이 가능해야 그 의의를 가지는데 index.ts 사용을 너무 과도하게 해버리면 특정 컨텍스트에 종속되는 부분이 공감이 되었다.

 

3. 일관성

index.ts 사용 패턴을 전체 애플리케이션에 걸쳐 일관되게 적용하면 개발자가 프로젝트 구조를 쉽게 파악하고 이해할 수 있을 것이다.

 

하지만 이 부분은 어디까지나 남용하지 않은 범위 내에서만 효과적이므로 조심할 필요는 있어보인다.

 

결론

index.ts 파일을 통한 import 및 export는 프로젝트 코드베이스의 유지 관리와 가독성을 향상시킬 수 있는 전략이다.

 

자료 조사를 하면서 위에 작성되어 있는 블로그를 통해 코드 분리를 종속성이 아닌 재사용성을 기준으로 수행하는 것이 올바른 방향이라는 것을 알게 되었다.

 

새로운 패턴을 알게 되었다고 비판적인 시각 없이 따라만하지 않으려고 했나 돌아보게 되었다.

 

아직 컴포넌트 분리 부분은 ‘관심사의 분리’에 대해 학습하면서 더 연습해보아야 할 것 같다.

 

References

Maximize Typescript Productivity: Use the Index File Now

Maximize Typescript Productivity: Use the Index File Now

컴포넌트의 관심사 분리에 대한 고민

컴포넌트의 관심사 분리에 대한 고민