path 설정

Typescript를 사용한다면
babel과 함께 tsconfig도 설정해줘야 한다

바벨

라이브러리 설치

npm install -D babel-plugin-module-resolver

babel.config.js 수정

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

tsconfig.json

// prettier-ignore
{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {

    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"],
  },
    "exclude": [
      "node_modules",
      "babel.config.js",
      "metro.config.js",
      "jest.config.js"
    ]
  }
}

import

import ~ from '@/components/~

baseUrl을 src로 설정 후 paths를 @로 주었기 때문에
@를 입력하면 src를 기준으로 경로를 탐색한다

실행

npm run start --reset-cache