[React Native] 리액트 네이티브에 자바스크립트를 써야할까 타입스크립트를 써야할까?

본 글은 다음 두 게시물을 번역, 정리하며 공부한 글입니다 :) 

 

Using TypeScript · React Native

 

🤔Which one is Better for React Native: JavaScript or TypeScript?

---

타입스크립트? 자바스크립트?

리액트 네이티브에서는 기본적으로 새로운 애플리케이션을 만들 때, TypeScript 언어가 기본값이지만, JavaScript도 널리 쓰이고 있습니다. 

 

.jsx 파일의 확장자라면 JavaScript로, .tsx 파일 확장자는 TypeScript로 처리됩니다.

 

 

그렇다면 왜 어떤 사람들은 TypeScript를, 어떤 사람들은 JavaScript를 사용할까요?

---

React Native에서의 자바스크립트

자바스크립트는 리액트 네이티브 개발에 사용되는 주류 언어였지만, 현재는 TypeScript를 사용하도록 바뀌어가고 있는 추세입니다. 자바스크립트는 웹 개발에 널리 사용되며, 학습하기 쉬운 언어입니다.

 

👍 자바스크립트 장점

• 빠른 개발 시간: 자바스크립트는 동적이고 유연한 언어로서, 개발자가 빠르게 개발할 수 있습니다.
• 넓은 개발 커뮤니티: 많은 개발자들이 자바스크립트를 사용하는 만큼, 흔한 문제의 솔루션을 찾기가 쉽고 자바스크립트 코드를 배우고 트러블슈팅이 쉽습니다.
• 배우기 쉬움: 자바스크립트는 배우기 쉬워서 초보자들에게 좋은 선택이 될 수 있습니다.

👎 자바스크립트 단점

• 정적인 타입이 없음: 자바스크립트는 동적 타입 언어(Dynamically typed Language)로서 런타임에 예기치못한 버그가 나타날 수 있습니다.
• 코드가 복잡해질 수 있음: 정적인 타입이 없기 때문에, 애플리케이션이 복잡해짐에 따라 코드의 품질과 가독성을 유지하기 어려울 수 있습니다.
• 낮은 코드 품질: 자바스크립트가 배우기 매우 쉽기 때문에, 많은 개발자들은 좋은 예시를 찾지 못할 수 있으며 코드가 제대로 작성되지 않을 수도 있습니다.

 

💻 JavaScript 코드 예시

import React from 'react';
import { Text, View } from 'react-native';

const MyComponent = ({ message }) => {
  return (
    <View>
      <Text>{message}</Text>
    </View>
  );
};

export default MyComponent;

---

React Native에서의 타입스크립트

타입스크립트는 자바스크립트의 상위 집합으로서, 자바스크립트에 선택적인 정적 타이핑을 추가하는 언어입니다. 최근에 많이 이용되고 있는 추세이며, 자바스크립트를 사용했을 때 보다 더 강하고 유지보수성 있는 애플리케이션을 만들 수 있습니다. 

 

👍 타입스크립트 장점

• 향상된 코드 품질: 타입스크립트는 자바스크립트에 정적 타이핑을 추가하면서, 컴파일 시 버그를 해결하는 것을 도와주고, 코드의 유지보수성을 높여줍니다.
• 향상된 개발자 경험: 타입스크립트는 자동 완성 및 오류 검사와 같은 기능을 이용해 더 나은 개발 경험을 제공합니다. 이로 인해 개발자들이 코드를 작성하고, 유지 관리하는 것이 쉬워집니다.
• 문서화: 타입스크립트의 정적 타이핑은 코드를 더 쉽게 이해할 수 있도록 하므로, 더 나은 문서화를 할 수 있습니다.

👎 타입스크립트 단점

• 배우기 어려움: 타입스크립트는 자바스크립트에 비해 배우기 어렵고, 문법과 특징에 익숙해지는데 시간이 조금 걸릴 수 있습니다.
• 긴 개발 시간: 타입스크립트의 추가적인 문법과 정적 타이핑은 개발 시간을 느려지게 합니다. 특히, 작은 규모의 프로젝트에서 개발 시간이 더 오래걸리게 합니다.
• 커뮤니티의 한계: 타입스크립트의 사용이 늘고 있기는 하지만, 아직은 자바스크립트에 비해 상대적으로 작은 커뮤니티를 가지고 있습니다. 따라서 자바스크립트에 비해 문제가 발생했을 때 해결책을 찾는 것이 어려울 수 있습니다. 

 

💻 TypeScript 코드 예시

import React from 'react';
import { Text, View } from 'react-native';

interface Props {
  message: string;
}

const MyComponent: React.FC<Props> = ({ message }) => {
  return (
    <View>
      <Text>{message}</Text>
    </View>
  );
};

export default MyComponent;