React 절대경로 설정하기

React에서 컴포넌트 import할 때 절대경로 사용하기

1. 프로젝트 폴더의 '루트 경로'에 jsconfig.json 파일을 생성한다.
2. jsconfig.json 파일 내부에 다음과 같이 작성한다. (src폴더를 기준으로 경로를 잡겠다는 의미)

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

3-1. 절대경로 적용 전

import { alertActions } from '../../redux/modules/alertMessageSlice';
import { todoActions } from '../../redux/modules/todosSlice';
import Header from '../Header';

3-2. 절대경로 적용 후

import { alertActions } from 'redux/modules/alertMessageSlice';
import { todoActions } from 'redux/modules/todosSlice';
import todoValidator from 'utils/todoValidator'

상대경로는 현재 자신의 위치를 기준으로 파일의 경로를 찾아간다.
따라서 src 내부가 복잡해질수록 코드 가독성이 떨어지고 직접 import 코드를 입력할 경우 실수할 확률이 높아지는데, 절대경로를 사용하면 위처럼 깔끔하게 볼 수 있다.