Alias(@)로 import 하기 react native

박정빈·2025년 8월 23일

React Native 사용기

목록 보기
19/33

0. 라이브러리 설치

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

1. Babel 설정 (.babel.config.js)

프로젝트 루트에 있는 babel.config.js 파일에 module-resolver 플러그인을 추가합니다.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'], // 별칭 기준 경로
        alias: {
          '@': './src', // @ 를 src 폴더로 매핑
        },
      },
    ],
  ],
};

2. tsconfig.json 혹은 jsconfig.json 설정

아래코드를 추가

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

3. 사용 예시

import SomeComponent from '@/components/SomeComponent';

0개의 댓글