RN 절대경로 (typescript)

상대경로로 import를 하면 불편한 점이 있다. 만약 파일의 경로를 수정했을 때 ../../ 의 무한지옥으로 갈 수 있다는 점이다.

그 상황을 해결하기 위해 나는 항상 상대경로가 아닌 절대경로로 설정을 하는 습관이 있다.

expo로 프로젝트를 만들면 babel.config.js 와 tsconfig.json 이라는 파일이 있다.

babel-plugin-module-resolver 를 설치한다.

setup a custom alias for directories, specific files, or even other npm modules.

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

https://www.npmjs.com/package/babel-plugin-module-resolver

설치해준 뒤 babel.config.js 파일 return 안에 plugins를 추가한다.

return{
 ...
 plugins: [ //추가
      "module-resolver",
      {
        root: ["."],
        extensions: [
            ".ios.ts",
            ".android.ts",
            ".ts",
            ".ios.tsx",
            ".android.tsx",
            ".tsx",
            ".jsx",
            ".js",
            ".json",
          ],
      },
    ],
}

root를 최상단 디렉토리(.) 로 설정한다.
이렇게 하면 절대 경로를 사용할 수 있다.

하지만 자동완성이 되지 않는다.  자동완성을 하기 위해서 tsconfig.json파일을 수정한다.

  "compilerOptions": {
    ...
    "baseUrl": "." //추가
  }

만약에 재실행했을 때 오류가 난다면 터미널에서

expo r -c

expo를 재실행한다.

아니면

npm run start --reset-cache

결과

components/NewComponent.tsx

import { Text, View } from "react-native";
import React, { Component } from "react";

export default class NewComponent extends Component {
  render() {
    return (
      <View>
        <Text>NewComponent</Text>
      </View>
    );
  }
}

app.tsx

import NewComponent from "./components/NewComponent" // 상대경로
import NewComponent from "components/NewComponent"; // 절대경로