[babel] React Native 절대경로 추가하기

Preiew

• babel.config.js에 경로를 추가합니다.
• tsconfig.json에 경로 추가해서 vscode가 인식할 수 있게 만들어줍니다.
• metro server 캐시를 리셋해줍니다. (이것 때문에 삽질함)

babel.config.js

"babel-plugin-root-import",
      {
        paths: [{ rootPathSuffix: "./src", rootPathPrefix: "~/" }],
      },

src/components 디렉토리를 절대경로로 추가해보겠습니다.

"babel-plugin-root-import",
      {
        paths: [
          { rootPathSuffix: "./src", rootPathPrefix: "~/" },
          {
            rootPathSuffix: "./src/components",
            rootPathPrefix: "@components/",
          },
        ],
      },

rootPathSuffix에는 진짜로 경로를 적어주고 rootPathPrefix에는 우리가 사용할 alias를 설정해주면 됩니다.

tsconfig.json

vscode에서 우리가 설정한 경로를 인식시키기 위해 tsconfig.json 파일에서도 경로를 설정해줍시다.

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

캐시 리셋!

설정을 변경했으면 캐시리셋과 함께 서버를 다시 시작해줍니다.

$ yarn start --reset-cache

그럼 절대경로가 잘 적용되는 것을 확인할 수 있습니다.