typescript를 공부하면서 ts와 tsx의 차이로 인해 문제를 겪은적이 있다.
dropdown picker라이브러리를 사용하던 중 확장자를 .ts로 했을때는 에러가 발생했으나, .tsx는 에러가 발생하지 않는 상황이었다.
tsx를 알기 위해서는 js와 jsx를 알아야한다.
jsx는 js(javascript)의 확장 문법으로 Javascript XML의 약자이다.
즉 '자바스크립트에 XML을 추가한 확장형 문법'을 의미한다.
다시 말하면 단순 javascript는 html 문법을 사용할 수 없지만 jsx는 html 태그 같은 마크업 문법을 사용할 수 있다.
이는 typescript와도 호환이 가능해 .tsx로도 사용한다.
jsx와 tsx는 공식적인 자바스크립트 문법은 아니지만, React docs는 jsx를 아래와 같이 설명한다.
jsx는 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.
1. typescript 문법으로만 작성
// checkGeoPermission.ts
export const checkGeoPermission = async () => {
try {
const checkResult = Object.values(
await checkMultiple([
PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
PERMISSIONS.ANDROID.ACCESS_COARSE_LOCATION,
]),
)[0];
return checkResult;
} catch (err) {
throw new Error();
}
};
2. tsx = typescript + 마크업 문법
return 이 있어서 xml 문법을 사용하고 있음에도 불구하고 확장자를 ts로 지정해 문제가 발생했었다.
// Home.tsx
export const Home = () => {
return(
<SafeAreaView>
<Text>
This is Home Page
</Text>
</SafeAreaView>
)
}