[React] 많은 Import를 최대한 깔끔하게.

1. 인사

안녕하세요. 이번에는 Import를 최대한 깔끔하게 하는 방식에 대해 정리하려고 합니다.

---

2. 소개 배경

최근 회사에서 프로젝트의 Refactoring 하는 과정을 수행했습니다.
이를 위해 쪼개고 나누다보니 File들이 많아지게 되어
Import를 해야 하는 부분이 보기 힘든 경우가 발생하였습니다.

이를 정리하다가 꽤 괜찮은 방법을 찾아서 소개 하려고 합니다.

---

3. 기존 Import 방식

Import를 정리하고자 하는 마음이 없었을 때는 다음과 같았습니다. (예시)

import Card from "./UserInfo/Setting/Card";
import Coupon from "./UserInfo/Setting/Coupon";
import HatedItem from "./UserInfo/Setting/HatedItem";
import LatestItem from "./UserInfo/Setting/LatestItem";
import LikedItem from "./UserInfo/Setting/LikedItem";
import LikedShop from "./UserInfo/Setting/LikedShop";
import Profile from "./UserInfo/Setting/Profile";

export default function MainComponent() {
    return (
        <div>
            <Profile/>
            <Card/>
            <LikedShop/>
            <LikedItem/>
            <HatedItem/>
            <LatestItem/>
            <Coupon/>
        </div>
    )
}

보시는 바와 같이 Import 해야하는 것들이 많았습니다.
앞으로는 더 많아질 가능성도 있었습니다.
그래서 다음과 같은 방식을 사용하였습니다.

---

4. Index.ts

우선 Card, Coupon, HatedItem 등이 모여 있는 Setting Folder 내부에 index.ts를 만듭니다.
그럼 다음과 같은 폴더 구조가 됩니다.

그리고 index.ts에 다음과 같은 내용을 넣어줍니다.

export {Card} from "./Card";
export {Coupon} from "./Coupon";
export {HatedItem} from "./HatedItem";
export {LatestItem} from "./LatestItem";
export {LikedItem} from "./LikedItem";
export {LikedShop} from "./LikedShop";
export {Profile} from "./Profile";

---

5. MainComponent

이전 단계처럼 Index.ts를 만들었다면 다시 MainComponent로 돌아가 Import를 진행합니다. 그렇게하면 MainComponent는 다음과 같아집니다.

import { 
    Card, 
    LikedShop, 
    Profile,
    LikedItem,
    HatedItem,
    LatestItem,
    Coupon,
} from "./UserInfo/Setting"

export default function MainComponent() {
    return (
        <div>
            <Profile/>
            <Card/>
            <LikedShop/>
            <LikedItem/>
            <HatedItem/>
            <LatestItem/>
            <Coupon/>
        </div>
    )
}

어떤가요? 훨씬 깔끔해지지 않았나요?

index.ts로 folder 내부에서 통합 관리하는 것도 좋고,
Import할 때 이전처럼 1줄마다 import를 하는 것이 아니기 때문에 정리되어 있는 것 같아 보여서 좋습니다.