[React] 파일 경로를 깔끔하게 정리하기

프로젝트의 규모가 커지다보면 가장 먼저 드는 생각이 파일들의 효율적인 정리이다.

정리할 수 있는 유용하지만 간단한 방법을 알아보자.

 

부모 폴더가 같은 Components

import { SignInModalBox } from "./SignPage/SignInModal";
import { SignUpModalBox } from "./SignPage/SignUpModal";

import { useTable } from "./Hooks/useTable";
import { useConfiguration } from "./Hooks/useConfiguration";

이 처럼 부모 폴더가 같은 컴포넌트를 사용할 때, 컴포넌트 하나 당 import 구문이 한 줄씩 추가된다.

이를 정리하기 위해 index.js(ts) 파일을 해당 폴더에 생성해 하위 파일들을 모두 import 및 export 해준다.

import useTable from './useTable';
import useConfiguration from './useConfiguration';

export {
	useTable,
    useConfiguration
};

 

특정 경로 단순화 하기

앞서 hooks 폴더의 하위 파일들을 Index로 묶어주었다. 이번에는 hooks 폴더의 경로를 단순화 해보자.

import { useDataTable, usePagination, useConfigurations } from '@hooks';

configuration을 적용하면 위와 같이 특정 폴더나 파일의 경로를 패키지처럼 단순화 시킬 수 있다.

jsconfig.json 혹은 tsconfig.json를 생성하거나 수정하여 적용할 수 있다.

 

{
    "compilerOptions": {
	...
    ...
    ..
    "paths": {
    "@utils/*": ["common/utils/*"],
    "@hooks": ["common/hooks/index.ts"],
    "@resources": ["common/constants/resources.ts"],
    "@types": ["common/types/index.js"],
    }
    },
}

특정 폴더나 파일을 경로를 단순화 할 수 있다.