React 절대경로 설정 및 컴포넌트 불러오기

필자는 새로운 React 프로젝트를 진행할 때 항상 이 절대 경로 설정을 해주는 편이다.

처음에는 그냥 상대 경로를 사용했지만 프로젝트를 진행하다 보면 항상 파일 구조가 깊어졌고 결국 상대 경로 지옥에 빠져, import 하기가 더 번거럽고 가독성이 나빠졌다.

import Avatar from '../../../components/Avatar' // 상대 경로로 아바타 컴포넌트 불러오기
import Avatar from 'components/Avatar' // 절대 경로로 아바타 컴포넌트 불러오기

물론 상대 경로가 나쁘다는건 아니다.
이론상 속도도 빠르고 경로 수정도 용이하기 때문에 그냥 용도에 맞게 선택해서 사용하는 듯하다.

그러나 오늘은 절대 경로 설정하는 방법을 알아보기로 했으니 바로 시작해보자.

1. jsconfig.json (tsconfig.json)

첫 번째 방법은 필자가 가장 많이 사용하는 방법으로 jsconfig.json (타입 스크립트면 tsconfig.json) 파일에 루트 디렉터리를 수정하는 방법이다.

jsconfig(tsconfig). json는 루트 파일 성정, 에디터에 대한 설정 및 기타 javascript에 대한 설정을 조작할 수 있는 파일이다

https://code.visualstudio.com/docs/languages/jsconfig

jsconfig.json Reference

CRA(create-react-app)으로 프로젝트를 만들었다고 가정했을 때 보통 src 파일안에 소스코드가 있기 마련이다. 그러니 jsconfig.json을 통해서 이 src 폴더를 루트 폴더로 지정하기만 하면 된다.

jsconfig.json 파일이 없다면 프로젝트 최상단(루트)에 새로 만들고 아래에 옵션들을 추가해주자

"compilerOptions": {
    "baseUrl": "src", // 루트 폴더 url
  },
  // import시 해당 루트를 포함할껀지에 대한 여부 
  // include에 src 포함안할시 import 'src/components/Avatar'
  // include에 src 포함시 import 'components/Avatar'
  "include": [
    "src" 
  ]
}

components 폴더가 src 하단에 존재한다고 가정했을때 , 컴포넌트가 절대 경로로 정상적으로 불러와지는 걸 확인할 수 있을 것이다.

import Avatar from 'components/Avatar';

---

2.craco

두 번째 방법이라곤 하지만 사실 이것도 jsconfig.json을 확장해서 사용하는 방법이다.

이 방법을 사용하기 위해선 webpack 설정을 오버 라이딩하면 되는데 CRA로 프로젝트를 만들었을 경우 webpack 파일을 직접 건드리려면 eject를 해야 한다.
하지만 이걸 하면 CRA의 장점 (간소화된 트랜스파일링 및 번들링 작업)이 사라지기 때문에 일반적으로 추천되지 않는다. 그래서 craco(Create React App Configuration Override)라는 라이브러리를 설치해서 eject 없이 webpack설정을 변경한다.

일단 아래와 같이 설치를 해주자,

yarn add @craco/craco // npm i @craco/craco
yarn add craco-alias -D  // npm i craco-alias -D

package.json의 scripts 부분이 이미 craco가 아니라면 아래와 같이 수정하자.

package.json

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

jsconfig.paths.json을 루트에 생성 후 각 path에 명칭을 지정해주자. 예시로는 components, utils, assets을 지정해보도록 하겠다.

jsconfig.paths.json

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

craco.config.js

마찬가지로 루트에 생성후 플러그인 설정을 해주자. ts 환경이라면 jsconfig이란 단어를 모두 tsconfig로 바꾸기만 하면 된다.

const cracoAlias = require('craco-alias');

module.exports = {
	plugins: [
		{
			plugin: cracoAlias,
			options: {
				source: 'jsconfig',
				jsConfigPath: 'jsconfig.paths.json',
			},
		},
	],
};

jsconfig.json

마지막으로 jsconfig.json이 없다면 생성해주고 윗부분에 "extends": "./jsconfig.paths.json"를 추가해서 확장 가능하도록 설정해주자

{
	"extends": "./jsconfig.paths.json",
    "compilerOptions": {
    },
    ...
}

이제 앞서 지정해둔 path를 이용해 좀 더 깔끔하게 import가 가능하다

import Date from '@utils/date';
import Calandar from '@components/calandar';

프로젝트가 복잡하지 않은 경우 사실 jsconfig.json파일만 변경하는 첫 번째 방법으로도 충분하지만
루트 폴더 안에서도 계속 중첩이 된다면 복잡해질 수도 있을 것이다.
그럴때 이 두 번째 방법으로 좀 더 세분화된 경로 설정을 해준다면 좀 더 깔끔하게 유지할 수 있다.

---

컴포넌트 export TIP

컴포넌트 단위 개발을 하다 보면 많은 양의 컴포넌트를 반복적으로 불러올 때가 많고 그러다 보면 import만 했는데도 30줄이 넘어갈 수도 있을 거다.
이를 간소화하기 위해서는 각 폴더마다 index.js 파일을 만들어주면 좋다.

예를 들어 components 폴더의 index.js 폴더에는 아래와 같이 사용될 컴포넌트를 모두 나열해줍니다.

export { default as Divider } from './Divider'
export { default as Tooltip } from './Tooltip'
export { default as Button } from './Button'
...

이런 식으로 default export을 named export으로 사용할 수 있게 설정을 해줍니다.
export 관련해서 자세한 내용은 모듈 내보내고 가져오기 참고.

이러면 원래 따로 불러왔던 컴포넌트들을 한 줄에서 import가 가능해진다.

import {Divider, ToolTip, Button } from '@components';

출처:
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
https://code.visualstudio.com/docs/languages/jsconfig
https://ko.javascript.info/import-export#ref-4122