vite 리액트 상대경로 @로 절대 Path 대체하기

vite 빌드로 구성한 리액트 앱의 경우 import 경로를 @로 절대 Path 대체하여 사용하는 방법에 대해서 정리하였습니다.

이 방법을 사용하면 ../../../…….. 등의 상대 경로의 불편함을 해소할 수 있습니다.

상대 경로를 @로 지정하기

리액트에서 컴포넌트를 import 할 때 다음과 같이 현재 폴더를 기준으로 다음과 같이 선언하여 사용합니다.

import MyComponent from "../components/pages/MyComponent"

하지만 관리 차원의 폴더가 늘어나면서 그 Depth 역시 깊어지면 다음과 같이 보기도 불편한 형태로 import 를 해야합니다.

import MyComponent2 from "../../../../components/pages/MyComponent2"

이럴 때 유용하게 사용할 수 있는 것이 src 폴더를 기준으로 @로 path를 대체하는 설정입니다.

path를 @로 대체하기

우선 @tyeps/node 를 설치합니다.

타입스크립트에서는 Node.js의 특정 모듈과 함수의 타입 정보를 알아야하는데, 이럴 때 @types/node를 설치하면 됩니다.

npm i @types/node

vite.config.ts 파일을 열어 다음과 같이 path 모듈을 import 합니다.

import path from "path";

그런 후 resolve 항목을 다음과 같이 작성합니다.

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: "@",
        replacement: path.resolve(__dirname, "src"),
      },
    ],
  },
});

find

가져오기 경로에서 인식할 텍스트를 의미합니다. @로 지정하였음을 의미합니다.

find: "@",

replacement

위의 find @ 에서 지정한 내용이 실제로 대체되어야 할 내용을 기술해 줍니다.

아래의 구문은 현재 파일과 src 디렉토리의 절대 경로 관계를 나타내며, 언더바 2개의 dirname 은 현재의 리액트 파일 디렉토리를 의미합니다.

path.resolve(__dirname, "src")

즉, @ 캐릭터가 현재 앱에서 맵핑되어야 할 디렉토리를 의미합니다.

tsconfig.json 설정

vite 설정을 위와 같이 정의한 후, 이제는 tsconfig.json 타입스크립트 설정을 해야 합니다.

"compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    },
    "target": "ES2020",
    ...

@/ 디렉토리 하위의 모든 파일은 ./src/로 path로 변환하게 됩니다.

만약 src/* 만 기술하게 되면 base url을 찾기 못하기 때문에 다음과 같은 에러가 발생하게 됩니다.

baseUrl이 설정되지 않은 경우 상대 경로가 아닌 경로는 허용되지 않습니다.

따라서 아래와 같이 닷 슬래시 부터 작성해 주어야 합니다.

"@/*": ["./src/*"]

@ 대신 src 형태로 절대 경로 설정하는 방법

src 형태로 절대 경로를 처리하는 방법도 있습니다.

타입스크립트 리액트 Vite 절대경로 설정하기

하지만, 저만 그런지 모르겠지만, src로 설정했을 때에는 import 구문을 클릭했을 때 해당 파일로 이동하지 않았습니다.

즉, 보통 Ctrl 버튼을 누르고 import 파일을 누르면 손가락 아이콘 버튼으로 전환되며 해당 파일로 바로 이동할 수 있는데 이 기능이 활성화 되지 않더군요. (혹시 아시는 분?!)

반면, @로 설정했을 경우에는 해당 파일로의 이동 및 파일의 정보 확인이 가능했습니다.

이상으로, @ 처리를 통해 간결하게 import 문을 작성하는 방법에 대해서 기술해 보았습니다.

그 밖에 도움이 되는 글

리액트 타입스크립트 vite 환경 구성 튜토리얼(2023)
타입스크립트 처음 적용 리액트 TO DO 앱 만들기