#39.TIL | 리액트 상대 경로 탈출하기(Craco)

1. 상대 경로

리액트에서 페이지를 만들다 보면 여러 컴포넌트들과 recoil을 사용한다면 atom을 import해와야 한다. 그렇게 파일의 규모가 방대해지다 보면

import { Button } from "../../../../components";
import axios from "../../../../utils/axios";
import { State } from "../../../../states/reference";

위와 같이 수 많은 ../ 으로 이루어진 import 지옥을 경험할 수 있다. 만약, 리팩토링 등을 이유로 파일의 위치가 변경된다고 하면 번거로운 경험을 할 수 있게 된다.

2. Craco를 통한 절대경로 설정

Craco는 Create React App Configuration Override의 약자로 eject를 사용하여 웹팩을 수정하지 않더라도 절대경로를 사용할 수 있게 한다.

사용법

1. 설치

yarn add craco-alias @craco/craco

2. package.json변경

기존 파일

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

변경 후

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
  },

package.json을 변경하여 craco로 프로젝트가 실행될 수 있도록 한다.

3. craco config 추가

프로젝트의 root 경로에 croco.config.js 파일을 생성한다.(craco를 사용하기 위한 설정 파일)

const CracoAlias = require("craco-alias");

module.exports = {
	plugins: [
      {
      		plugin:CracoAlias,
			options:{
            	source : "jsconfig",
              	tsConfigPath : "jsconfig.paths.json",
            }
      }
   ]
};

3. jsconfig.json 파일에 항목 추가

{
	"compilerOptions": {
    	"baseUrl": ".",
        "paths": {
          "@/*": ["./src/*"],
          "@components/*": ["./src/components/*"]
          "@states/*": ["./src/states/*"]
          "@utils/*": ["./src/utils/*"]
        }  
    }
}

이렇게 작성하게 되면 아까 위에 있었던 상대경로 파일들은 아래와 같이 import할 수 있게 된다.

import { Button } from "@components";
import axios from ".@utils/axios";
import { State } from "@states/reference";

🐝 🍯