[React Native] path alias 설정하기

 프로젝트를 진행하면서 import 구문이 불필요하게 길어지는 것 같아서 자주 불리는 디렉터리 주소를 alias로 설정해서 사용하기로 결정했다.

 

 코드가 조금 더 깔끔해지길 바라면서 RN 프로젝트에서 path alias 설정하는 방법에 대해서 알아보았다.

일단 필요한 라이브러리를 받아준다.

npm install -D babel-plugin-module-resolver

 

내 프로젝트 구조는 아래와 같다.

...
src
 ㅏcomonents
 ㅏscreens
 ㅏhooks
 ㅏ...
 ㄴutils
    ㄴ styles.ts
App.tsx
.eslint.ts
.gitignore
.yarnrc.yml
.prettierrc.js	
babel.config.js
package.json
package-lock.json
README.md
tsconfig.json
yarn.lock
...

 

 

 이 중 components와 styles을 자주 쓸 것 같아 미리 alias를 지정해주려 한다.

babel과 tsconfig에 관련 설정값을 넣어주면 끝이다.

presets: ['module:@react-native/babel-preset'] 을 넣어준다.

plugins에는 'module-resolver'을 넣어주고 설정값으로 root와 alias를 정해준다. 

root: alias를 등록할 경로의 시작점을 절대경로로 지정한다.

alias: root와의 상대 경로와 별을 지정한다.

tsconfig.json에 컴파일러 설정값을 넣어준다. 이 곳에는 컴파일러가 코드를 해석하는 방식을 지정하는 곳으로 @styles라고 작성된 것을 절대경로 ./src/utils/styles.ts로 읽도록 설정한다.

baseUrl에는 시작점, paths에 바벨에 설정한 별칭의 경로와 일치하도록 넣어주면 된다.

 

 설정 전과 후를 살펴보면

// 설정 전
import { Container, Title } from '../../utils/styles.ts'

//설정 후
import { Container, Title } from '@styles'

 

 확실히 깔끔해진 것을 볼 수 있다.

 

만약 디렉터리 구조가 조금만 더 복잡해져도 상대경로가 많이 길어지고 보기 불편해질 것이다.

미리미리 설정해두고 편하게 사용하자.