TypeScript 및 React Native 시작하기

홀라 홀라,

RN(React Native) 프로젝트에서 TypeScript를 사용하는 것은 어려운 작업처럼 보일 수 있으며 확실히 그럴 수 있습니다. 프로덕션 앱을 TypeScript로 업데이트하기 전에 새로운 RN 프로젝트에서 실험/연습하는 것이 좋습니다.

시작하기

Here 은 here 찾은 명령을 사용하여 생성된 새로운 저장소입니다.

JSX

이 노력에 대한 한 가지 좋은 점은 JSX( return () 사이의 항목)가 많이 변경되지 않는다는 것입니다.

JavaScript 구성 요소(.js)

텍스트 소품을 받아들이고 간단한 <Text> 구성 요소 내부에 표시하는 매우 간단한 JS 구성 요소를 살펴보겠습니다.

const MyTextComponent = (props) => {
  const {text} = props;

  return (
    <Text>{text}</Text>
  );
}

TypeScript 구성 요소(.tsx)

다음은 동일한 구성 요소이지만 TS를 사용하는 것입니다. 실제 구성 요소 내에서 많이 변경되지 않았음을 알 수 있습니다.

type Props = {
 text: string;
};

const MyTextComponent = (props: Props) => {
  const {text} = props;

  return (
    <Text>{text}</Text>
  );
}

우리가 다르게 하고 있는 것은 MyTextComponent 에 전달된 props가 text 이라는 하나의 속성만 포함해야 하고 해당 props가 string 이어야 한다는 것입니다.

이 규칙 세트는 다음을 수행하려고 하면 문제가 있음을 알려줍니다.
<MyTextComponent text={5} />
위의 충돌이 발생합니까? 아니요. 하지만 즉시 알려줍니다.

로컬 상태의 TypeScript

다음은 TypeScript를 활용하기 위해 로컬 상태( useState )를 업데이트하는 방법입니다.

import {TextInput, TouchableOpacity} from 'react-native';

const MyTextInputComponent = () => {
  // const [text, setText] = useState(''); // JS version
  const [text, setText] = useState<string>(''); // TS version

  const incrementText = () => {
    setText(oldVal => oldVal + 1); // TS will yell at us here
  };

  return (
    <>
      <TextInput onChangeText={setText} value={text} />
      <TouchableOpacity onPress={incrementText}>
        <Text>Increment Text</Text>
      </TouchableOpacity>
    </>
  );
}

위의 예에서 꺾쇠 괄호 표기법을 사용하여 이 text 값이 string 이어야 한다고 말함으로써 로컬 상태에 대한 유형을 설정했습니다.

TS는 왜 incrementText() 버튼에 대해 소리를 지르나요?
TS는 text prop이 string이라는 것을 알고 있습니다. 이전 setText(oldVal => oldVal + 1); 값에 1을 더하는 text과 같은 코드를 작성할 때 TS는 Number 및 string을 추가할 수 없다고 경고합니다.

.ts 대 .tsx

이 두 파일이 모두 표시됩니다. .ts 파일은 UI가 아닌 논리(즉, return() 문에 없는 항목)에 사용됩니다. UI 구성 요소(예: <View>, <Text>, and etc)를 표시하려면 .tsx 파일에 있는지 확인해야 합니다.

요약

처음이라면 프로덕션 앱에 TypeScript를 추가하는 것을 권장하지 않습니다.

JSX는 대부분 동일하게 유지됩니다.

TypeScript는 당신의 친구입니다

즐거운 코딩하세요!

매트