react-native & expo에서 ts paths alias 사용하기

React를 포함한 프론트엔드 프로젝트를 진행하다보면 소스파일의 폴더구조가 깊어지고 해당 코드를 import 하려면 상대참조로 너무 길어져서 읽기어렵고 복잡하게 보이는 경우가 있다.

이럴 경우 typescript의 paths alias 기능을 사용하면 훨씬 가독성있게 설정할 수 있다.

예시
설정 전

import util from '../../../../src/funcs/util';

설정 후

import util from '@funcs/util';

1. tsconfig.json

프로젝트 폴더 최상위에 있는 tsconfig.json 파일에 paths 옵션에 경로를 축약하고싶은 값을 입력한다.

{
  "compilerOptions": {
    "baseUrl": ".", 
    "paths": {
      "@components": ["./src/components/module"],
      "@funcs": ["./src/funcs"],
      "@api": ["./src/api/api"],
      "@styles": ["./src/components/styles"]
    }
  }
}

이렇게까지만 해도 에디터 상에서는 문제없이 /src/funcs 경로를 @funcs 라는 별칭으로 자동완성이 되고 import도 할 수 있다.

하지만 실제로 실행해보거나 build하게되면 해당 module을 찾을 수 없다는 오류가 발생할 것이다.

React, React-Native 등의 코드는 babel을 통해 js로 트랜스파일링되는데 소스코드 상에 작성한 @funcs/util의 경로는 babel이 모듈로 인식하여 node_modules에서 찾아서 그렇다. node_modules가 아니라 내가 정한 path 규칙에 맞는 폴더경로를 찾도록 하려면 추가 패키지를 설치 후 babel 설정을 해줘야 한다.

2. module resolver 설치

npm install --save-dev babel-plugin-module-resolver

3. babel.config.js 수정

react-native 를 expo로 시작했다면 최상위 경로에 babel.config.js 파일이 있을 것이다.

다음과 같이 plugins에 module-resolver 관련 설정을 추가해준다.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "expo-router/babel",
      [
        "module-resolver",
        {
          root: ["."],
          alias: {
            "@components": "./src/components/module/",
            "@funcs": "./src/funcs/",
            "@api": "./src/api/api",
            "@styles": "./src/components/styles/",
          },
        },
      ],
    ],
  };
};

여기까지하면 에디터 상에서 자동완성, import 는 물론이고 실행했을 때도 정상적으로 동작한다.
alias로 등록한 경로에 index.ts 을 만들어서 named export 를 등록해두면 import할 때 저 효율적으로 할 수 있을 것이다.