[React Native] .jsx 확장자 사용시 에러 및 설정 방법

프로젝트를 생성하고 .js 파일만으로도 충분히 개발이 가능하다

하지만 개발시 명시적인게 좋아서 JSX 파일에 .jsx 확장자를 사용하고 설정하는 방법을 알아보자

 

일단 프로젝트를 새로 생성 후 보이는 App.js 파일을 App.jsx로 바꾸고,

npx react-native start

npx react-native run-ios

yarn이 설치되어 있다면 npx대신 사용해도 된다

Metro와 Application을 다시 실행해보면 에러가 발생한다

 

에러메시지 중,

None of these files exist라고 나오면서 .jsx로 바꾼 파일명 뒤에 (.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx) 이렇게 나오는거 보니 .jsx 이제 사용하지 말고 TypeScript를 사용하여 .tsx로 쓰라고 암묵적으로 얘기하는 거 같은 느낌을 조금 받았다

 

암튼, TypeScript를 아직 사용하지 않고 .jsx를 사용하고 싶다면

3가지 방법이 있다고 Metro 홈페이지 나와있다.

Configuring Metro | Metro

정리해보면,

1. metro.config.js

2. metro.config.json

3. package.json 파일 안에 metro 필드

이렇게가 우선순위라고 한다

 

프로젝트에선 이미 metro.config.js 파일이 있으니 여기에서

module.exports = {
	resolver: {
    	sourceExts: ['jsx', 'js'],
    },
    ...
}

이렇게 추가해주고 Metro와 Application을 다시 실행해보면 성공!

 

 

끝.