프로젝트의 규모가 커지다보면 가장 먼저 드는 생각이 파일들의 효율적인 정리이다.
정리할 수 있는 유용하지만 간단한 방법을 알아보자.
부모 폴더가 같은 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"],
}
},
}
특정 폴더나 파일을 경로를 단순화 할 수 있다.
'React > React Basic' 카테고리의 다른 글
[React] 불변성을 쉽게 유지하는 Immer lib (1) | 2021.08.08 |
---|---|
[React] useContext 및 Context API (0) | 2021.08.08 |
[리액트] useReducer 이해하기 (0) | 2021.08.07 |
[React] 불필요한 렌더링 최적화하기 (2) | 2021.08.01 |
[React] useMemo와 useCallback (0) | 2021.08.01 |