3줄 요약
1. babel-plugin-module-resolver install
2. babel.config.js 수정 / tsconfig.json 수정
3. yarn start --reset-cache 로 꼭 시작해주기

1. babel-plugin-module-resolver 설치

babel-plugin-module-resolver npm 문서

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

or

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

2. babel.config.js 수정

rn 프로젝트라면 root에 있는 babel.config.js에 코드를 추가해줍니다.

BEFORE

module.exports = {
  presets: ['module:@react-native/babel-preset'],
};

AFTER

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          '~': './src',
          '@components': './src/components',
          '@screens': './src/screens',
          '@assets': './src/assets',
          '@query': './src/query',
        },
      },
    ],
  ],
};

3. tsconfig.json 수정

tsconfig.json의 compilerOptions에 절대경로 세팅과 관련된 내용을 추가해줍니다.

{
  ...
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "~/*": ["./*"],
      "*": ["./*"],
      "@components/*": ["components/*"],
      "@screens/*": ["screens/*"],
      "@assets/*": ["assets/*"],
      "@oages/*": ["pages/*"]
      ...
    }
  }
  ...
}

4. yarn start --reset-cache

프로젝트 설정이 바뀌는 것이기 때문에 cache를 리셋해주도록하자.
그렇지않았다간, 이해되지않는 에러와 마주하게 될것이다.

yarn start --reset-cache