React 에서 import 파일 절대경로 설정하기 | 깔끔하게 파일 경로 표시하기

https://ko.reactjs.org/

프로젝트를 시작하고 페이지 마크업 과정을 진행하면서임시 이미지를 상대경로로 import 해 사용하는 경우가 많아졌다.

• 실제 코드

import logo from '../../assets/images/footerimage.png';
import map from '../../assets/images/map.png';
import insta from '../../assets/images/insta.png';
import kakao from '../../assets/images/kakao.png';

이런 코드를 계속 보다보니 지저분 하다는 생각이 들어 찾아보던 중 이미지 파일들을 상대 경로로 가져오는 대신, 프로젝트의 루트 디렉토리 기준인 절대경로로 가져오면 경로가 더 짧아 가독성이 좋아질 수 있다는 글을 보고 방법을 찾아보며 적용하기 시작했다.

절대경로 지정 방법

jsconfig.json 설정하기

React 프로젝트 루트 디렉토리에 jsonfig.json 파일을 생성하고 baseUrl과 paths를 설정한다.

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

절대경로로 파일 불러오기

import logo from 'assets/images/footerimage.png';
import map from 'assets/images/map.png';
import insta from 'assets/images/insta.png';
import kakao from 'assets/images/kakao.png';

jsconfig.json 파일에 설정하면 위 코드처럼
src 디렉토리 기준으로 상대 경로 대신에 절대 경로를 사용할 수 있게 된다ㅎㅎ ! 예 !