React dynamic importer

일을 하다보면 폴더 내의 coponents들을 index에 import를 해서 사용할 때가 많습니다.
폴더 내 파일이 많아지다보면 결국은 index가 길어지고 하는 것도 귀찮아질때가 있죠

예를 들어 A~H 까지 component가 있다고 가정하면 index file에는

• src/components/index.ts

import A from "./A";
import B from "./B";
import C from "./C";
import D from "./D";
import E from "./E";
import F from "./F";
import G from "./G";
import H from "./H";

export { A, B, C, D, E, F, G, H };

이런 식으로 일일이 import 해야하죠

그래서 해결방안을 찾았습니다.

• src/components/index.ts

import { dynamicImpoter } from "../utils/index";

const requireContext = require.context("./", false, /.*\.(tsx)$/);

export const { A, B, C, D, E, F, G, H } = dynamicImpoter(requireContext);

import 과정이 생략된것을 볼 수 있습니다. 다음은 dynamicImpoter code 입니다.

src/utils/index.ts

export function dynamicImpoter(requireContext: __WebpackModuleApi.RequireContext) {
  const components: any = {};

  requireContext.keys().forEach((fileName: string) => {
    if (fileName === "./index.ts") return;

    const componentName = fileName.replace(/^.\/(.*)\.\w+$/, "$1");
    const componentModule = requireContext(fileName);

    components[componentName] = componentModule.default || componentModule;
  });
  return components;
}

이렇게 개발하면 조금이나마 편하게 개발할 수 있을 것 같습니다.
export도 가능하다면 동적으로하고 싶었는데 좀 처럼 방향성을 못찾겠네요 좋은 아이디어 있다면 댓글 남겨주세요.