babel.config.js

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

• React Native 프로젝트의 Babel 설정을 정의.
• Babel은 JavaScript 코드의 최신 문법을 구버전 브라우저에서도 동작할 수 있도록 변환해주는 도구

presets

• ['module:@react-native/babel-preset']
  : React Native 프로젝트에 필요한 기본 Babel 플러그인과 설정을 포함한 프리셋. React Native에 최적화된 최신 JavaScript 및 JSX 변환을 지원

plugins

• module-resolver:
  : 이 플러그인은 모듈의 경로를 별칭(alias)으로 설정.

예를 들어, @를 ./src/로 매핑하면 import 문에서 @/components/SomeComponent와 같은 형식으로 경로를 간단하게 사용가능. 프로젝트의 경로를 더 직관적이고 관리하기 쉽게 만든다.

extensions
Babel이 모듈을 해석할 때 고려해야 할 파일 확장자를 지정

예를 들어, .js, .ts, .tsx 등을 포함시킵니다.

alias
경로 별칭을 정의.

위 예제에서는 @를 ./src/로 설정하여 src 폴더 안에 있는 파일들을 간편하게 참조할 수 있게 합니다.

react-native-reanimated/plugin

• react-native-reanimated 라이브러리를 사용할 때 필요한 Babel 플러그인
• React Native의 애니메이션 기능을 향상시켜주며, 애니메이션을 정의하고 사용하는데 필요한 설정을 제공합

결론

• 모듈 해석의 간소화
  : module-resolver 플러그인을 사용하면 경로를 간단하게 설정할 수 있어, 코드의 가독성과 유지보수성을 높일수 있다.
• 애니메이션 성능 향상
  : react-native-reanimated 플러그인은 복잡한 애니메이션을 더 원활하게 처리할 수 있게 도와준다.