First-class Support for TypeScript
React Native 0.71 버전 출시와 함께, TypeScript 사용 경험을 개선하기 위해 다음과 같은 변화가 도입되었다:
- 새로운 앱 템플릿이 기본적으로 TypeScript로 제공됨
- React Native와 함께 제공되는 TypeScript 선언 파일
- React Native 문서가 TypeScript를 우선으로 작성됨
이 글에서는 TypeScript나 Flow 사용자에게 이러한 변화가 어떤 의미를 가지는지 설명한다.
새로운 앱 템플릿은 기본적으로 타입스크립트를 사용한다
0.71 버전부터 React Native CLI를 통해 새로운 React Native 앱을 생성하면 기본적으로 타입스크립트로 구성된 앱이 만들어진다!
npx react-native init My71App --version 0.71.0
새로 생성된 앱의 시작점은 App.js 대신 App.tsx가 된다. 이 파일은 완전히 타입스크립트로 작성된다. 새로운 프로젝트는 tsconfig.json이 미리 설정되어 있어, IDE가 바로 타입이 지정된 코드 작성을 지원한다!
React Native와 함께 제공되는 타입 선언
0.71 버전은 React Native에 내장된 TypeScript(TS) 선언을 처음으로 포함한 릴리스다.
이전에는 React Native의 TypeScript 선언이 DefinitelyTyped 저장소에 호스팅된 @types/react-native를 통해 제공되었다. TypeScript 타입을 React Native 소스와 함께 배치하기로 결정한 이유는 정확성과 유지보수를 개선하기 위해서다.
@types/react-native는 안정적인 릴리스에 대해서만 타입을 제공한다. 이는 TypeScript로 React Native의 사전 릴리스 버전을 개발하려면 부정확할 수 있는 이전 릴리스의 타입을 사용해야 함을 의미한다. 또한 @types/react-native 릴리스는 오류가 발생하기 쉽다. React Native 릴리스보다 늦게 제공되며, React Native의 공개 API에 대한 타입 변경 사항을 수동으로 검토하고 TS 선언을 업데이트해야 한다.
TS 타입이 React Native 소스와 함께 배치되면서 TS 타입에 대한 가시성과 소유권이 더욱 강화되었다. 우리 팀은 Flow와 TS 간의 일관성을 유지하기 위한 도구를 적극적으로 개발 중이다.
이 변경 사항은 React Native 사용자가 관리해야 하는 의존성을 제거한다. 0.71 이상으로 업그레이드할 때 @types/react-native를 의존성에서 제거할 수 있다. TypeScript 지원을 설정하는 방법은 새로운 앱 템플릿을 참조하자.
0.73 버전부터는 @types/react-native를 더 이상 사용하지 않을 계획이다. 구체적으로 다음과 같다:
- React Native 0.71 및 0.72 버전을 추적하는
@types/react-native가 릴리스된다. 이는 관련 릴리스 브랜치의 React Native에 있는 타입과 동일하다. - React Native 0.73 버전부터는 TS 타입이 React Native에서만 제공된다.
마이그레이션 방법
가능한 한 빨리 새로운 동일 위치 타입으로 마이그레이션하는 것을 권장한다. 다음은 여러분의 필요에 따라 마이그레이션하는 방법에 대한 상세 정보이다.
앱 관리자
React Native >= 0.71로 업그레이드한 후에는 devDependency에서 @types/react-native를 제거할 수 있다.
사용하는 라이브러리가 @types/react-native를 peerDependency로 참조하여 경고가 발생한다면, 해당 라이브러리에 이슈를 등록하거나 optional peerDependencies를 사용하도록 PR을 열어라. 당장은 경고를 무시해도 된다.
라이브러리 관리자를 위한 가이드
React Native 0.71 이전 버전을 대상으로 하는 라이브러리는 @types/react-native를 peerDependency로 지정하여 앱의 타이핑 버전에 맞춰 타입 체크를 수행할 수 있다. 이 의존성은 peerDependenciesMeta에서 선택 사항으로 표시해야 한다. 이렇게 하면 TypeScript를 사용하지 않는 사용자나 타이핑이 내장된 0.71 버전 사용자에게 불필요한 의존성을 강제하지 않는다.
@types/react-native에 의존하는 타입스크립트 선언 유지 관리
0.71 버전에서 도입된 주요 변경 사항을 확인하고 마이그레이션 준비가 되었는지 확인하려면 0.71 버전의 주요 변경 사항을 참고한다.
Flow를 사용한다면?
Flow 사용자는 0.71 이상 버전을 타겟으로 하는 애플리케이션을 계속 타입 체크할 수 있다. 하지만 템플릿에서 Flow에 대한 설정 로직이 기본으로 포함되지 않는다.
이전에는 Flow 사용자가 새로운 앱 템플릿에서 .flowconfig를 병합하고 flow-bin을 수동으로 업데이트하여 React Native의 Flow 타입을 업그레이드했다. 새로운 앱 템플릿에는 더 이상 .flowconfig가 포함되지 않지만, React Native 저장소에는 여전히 .flowconfig가 존재한다. 이를 기반으로 앱을 설정할 수 있다.
새로운 React Native 앱을 Flow로 시작해야 한다면, 0.70 버전의 새로운 앱 템플릿을 참고할 수 있다.
TypeScript 선언에서 버그를 발견하면 어떻게 해야 하나요?
여러분이 내장된 TS 타입을 사용하든 @types/react-native를 사용하든, 버그를 발견하면 React Native와 DefinitelyTyped 리포지토리 모두에 PR을 제출하세요. 문제를 해결하는 방법을 모르겠다면, React Native 리포지토리에 GitHub 이슈를 등록하고 @lunaleaps를 언급하세요.
문서는 타입스크립트를 우선으로 합니다
일관된 타입스크립트 경험을 제공하기 위해, React Native 문서를 타입스크립트를 기본 언어로 반영하도록 여러 가지 업데이트를 진행했습니다.
코드 예제는 이제 인라인 타입스크립트를 지원하며, 170개 이상의 인터랙티브 코드 예제가 새로운 템플릿에서 린팅, 포매팅, 타입 검사를 통과하도록 업데이트되었습니다. 대부분의 예제는 타입스크립트와 자바스크립트 모두에서 유효합니다. 호환되지 않는 경우, 두 언어 중 하나로 예제를 확인할 수 있습니다.
오류를 발견하거나 개선 사항이 있다면, 웹사이트가 오픈 소스임을 기억해 주세요. 여러분의 풀 리퀘스트를 기대하고 있습니다!
React Native TypeScript 커뮤니티에 감사드립니다!
마무리하며, React Native 개발자들이 TypeScript를 사용할 수 있도록 오랜 시간 동안 노력해 온 커뮤니티의 모든 공헌을 인정하고자 한다.
2015년부터 @types/react-native를 유지해 온 모든 기여자들에게 감사드린다. React Native 사용자들이 최고의 경험을 할 수 있도록 여러분이 기울인 노력과 관심을 잘 알고 있다.
@acoates, @eps1lon, @kelset, @tido64, @Titozzz, @ZihanChen-MSFT에게도 특별히 감사드린다. TypeScript 타입을 React Native로 이전하는 과정에서 컨설팅, 질문, 소통, 그리고 변경 사항 검토에 도움을 주셨다.
또한, React Native에서 새로운 앱 개발을 위한 TypeScript 경험을 지원해 온 react-native-template-typescript의 메인테이너들에게도 감사드린다.
앞으로도 React Native 저장소에서 더 직접적으로 협력하며, React Native 개발자 경험을 지속적으로 개선해 나가길 기대한다!