[React Native] .jsx 파일 사용 하는 방법

.jsx 파일 사용 하는 방법

들어가며

• 리액트 네이티브(React Native) 프로젝트에서 @.jsx@ 파일을 사용하는 방법을 간단하게 정리해본다.
• 일반적으로 리액트 네이티브에서는 @.js@ 파일만 인식하며, @.jsx@ 파일을 사용하려고 할 경우 에러가 발생한다.

 

방법

• 현재 리액트 네이티브 프로젝트의 @expo-cli@ 버전에 따라 방법 ① 또는 방법 ②의 방법을 따라한다.

 

방법 ① : metro.config.js 파일에 확장자 추가하기

• 프로젝트 최상단 경로(@/@)의 메트로 설정 파일(@metro.config.js@)에 다음과 같이 코드를 추가한다.
  • 만약 해당 파일이 없을 경우 새로 생성해준다.

 

/metro.config.js

module.exports = {
  resolver: {
    sourceExts: [
      'jsx',
      'js',
      'json',
      'ts',
      'tsx'
    ],
  }
};

 

메트로(Metro)는 리액트 네이티브(React Native)의 번들러(Bundler)로, 리액트 네이티브 프로젝트에 기본으로 탑재된다. 웹의 Webpack과 같이 JavaScript 파일을 하나로 번들링 해주며, 앱 실행 시 코드 변경사항을 핫 리로드 / 패스트 리프레시(Hot Reload / Fast Refresh) 해준다.

 

방법 ② : app.json 파일에 확장자 추가하기

• 프로젝트 최상단 경로(@/@)의 앱 설정 파일(@app.json@)에 다음과 같이 코드를 추가한다.

 

/app.json

{
  "expo": {
    // ...
    "packagerOpts": {
      "sourceExts": ["js", "json", "ts", "tsx", "jsx"],
      "config": "metro.config.js"
    },
    // ...
  }
}

 

참고 사이트

Renaming App.js to App.jsx fails when running `expo start` · Issue #191 · expo/expo-cli