절대경로 설정하기 (React Native + ts)

필요성

만약에 파일구조의 뎁스가 깊고

//ex) src/components/layout/app/header/index.tsx

상대경로로 불러오게 되면 다른 스크립트를 import 해올때  ../../../../ 의 향연일것이다.

그럴때는 alias를 이용해서 경로를 설정해놓으면 그게 더 편할때가 많다.

---

설정방법

1. babel-plugin-module-resolver 추가

yarn add --dev babel-plugin-module-resolver

 

2. babel.confing.js 에 plugin과 경로들 추가

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    //-------------------------------
    plugins: [
      [
        "module-resolver",
        {
          root: ["./src"],
          extensions: [
            ".ios.ts",
            ".android.ts",
            ".ts",
            ".ios.tsx",
            ".android.tsx",
            ".tsx",
            ".jsx",
            ".js",
            ".json",
          ],
          alias: {
            "@": "./src",
            "@component": "./src/components",
            "@hooks": "./src/hooks",
            "@constants": "./src/constants",
            "@types": "./src/types",
            "@state": "./src/state",
            "@assets": "./src/assets",
          },
        },
      ],
    ],
    //-------------------------------
  };
};

 

3. tsconfing.json에 경로 추가

//tsconfig.json 최상위에 만들어야함
{
  "compilerOptions": {
      "strict": true,
      "baseUrl": "./src",
      "paths": {
        "@components/*": ["components/*"],
        "@hooks/*": ["hooks/*"],
        "@constants": ["constants"],
        "@types": ["types"],
        "@state": ["state"],
        "@assets/*": ["../assets/*"]
      }
  },
}

---

eslint를 미리 설정해 뒀다면, 밑의 링크를 보면 좋을듯함

https://medium.com/react-native-seoul/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-module-resolver-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-b28f607fd0bb

프로젝트에 module resolver 적용하기