정중식의 개발공부로그

경로관리(리액트,타입스크립트)

14 Sep 2023 | memo

개요

프로젝트가 커질수록 경로관리에 어려움이있다고한다.

경로란 이런걸 뜻한다.

import PostList from '../../components/PostList';
import PostList from '../../components/PostList';
import PostList from '../../components/PostList';

근데 프로젝트가 커지면 폴더도 많아지고 파일도 많아질텐데 ../../../이런식으로 불러오는건 프로젝트가 더 복잡해지고 지저분해지는 혼란을 초래한다.

그러한 점을 막고자 리액트와 타입스크립트를 사용할때 경로관리하는 방법을 간단하게 메모하고자 한다.

경로관리 with 리액트,타입스크립트

리액트와 타입스크립트를 사용하면 tsconfig.json 파일이 루트 디렉토리에 있을건데, 이 파일을 수정해주면 된다.

 "baseUrl": "src",

 "path": {
    "pages/*": ["pages/*"],
    "components/*": ["components/*"]
  }

baseUrl과 path를 설정해주면 된다.

baseUrl: 프로젝트 경로가 src/components, src/pages 이렇게 되어있어서 src를 baseUrl로 잡아준다.
path: pages폴더안의 모든 경로 *, components 폴더안의 모든 경로 *를 불러와준다는뜻

전체 코드는 이렇다.
(사용자의 설정에따라 약간은 차이가있을 수 있다.)

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "path": {
    "pages/*": ["pages/*"],
    "components/*": ["components/*"]
  }
}

이렇게 설정해주면 다음과 같이 불러올수 있다.
또한, 자동완성기능으로 PostList만치고 엔터를 눌러도 자동으로 아래처럼 불러와진다.

import Header from 'components/Header';
import Footer from 'components/Footer';
import PostList from 'components/PostList';

Related Posts