Skip to main content

Helping migrate React Native libraries to the New Architecture

· 13 min read
Riccardo Cipolleschi
Riccardo Cipolleschi
Software Engineer at Meta

요약: React Native의 새로운 아키텍처를 지원하기 위한 리소스를 개선 중이다. 앱 마이그레이션을 돕는 저장소(RNNewArchitectureApp)와 라이브러리를 위한 저장소(RNNewArchitectureLibraries)를 이미 공개했다. 또한 웹사이트의 새로운 아키텍처 가이드를 개편 중이며, 새로운 아키텍처 관련 질문에 답변하기 위해 GitHub 워킹 그룹을 만들었다.

소개​

이번 글에서는 여러분의 네이티브 모듈과 네이티브 컴포넌트를 새 아키텍처에 해당하는 TurboModule과 Fabric 컴포넌트로 마이그레이션하는 데 도움이 되는 도구와 리소스에 대한 업데이트를 공유한다.

React Native 사용자는 앱을 구축하기 위해 다양한 오픈소스 라이브러리를 활용한다. 완전하고 일관된 생태계를 위해 이러한 라이브러리가 마이그레이션되어야 한다. 이를 통해 모든 사람이 새 아키텍처의 잠금 해제된 기능과 성능 개선을 누릴 수 있다.

라이브러리 개발자들이 새 아키텍처로 마이그레이션하는 것을 지원하기 위해 다음과 같은 작업을 진행 중이다:

  • 문서: 웹사이트의 새 아키텍처 가이드를 확장하여 새 아키텍처의 더 많은 개념과 컴포넌트 개발 방법을 다룬다.
  • 마이그레이션 예제: 두 개의 저장소를 설정하여 React Native 앱을 새 아키텍처로 마이그레이션하는 방법(RNNewArchitectureApp)과 두 아키텍처 모두에서 작동하는 Fabric 컴포넌트와 TurboModule을 만드는 방법(RNNewArchitectureLibraries)을 보여준다.
  • 지원: 올해 초, 새 아키텍처에 관한 논의와 질문을 위한 GitHub 워킹 그룹을 만들었다.

이 글에서는 이러한 리소스를 더 깊이 파고들어 어떻게 가장 효율적으로 사용할 수 있는지 자세히 설명한다. 마지막으로 가장 많이 사용되는 React Native 라이브러리의 현재 마이그레이션 상태를 간략히 소개한다.

문서화​

지난 6개월 동안, 우리는 새로운 아키텍처 도입 가이드와 Fabric에 대한 아키텍처 심층 분석을 추가했다. 앞으로 TurboModules 생성, CodeGen 이해 등에 관한 더 많은 가이드와 문서를 포함하도록 확장할 계획이다. 0.70 버전 출시 전까지 업데이트를 공유할 예정이다.

현재 새로운 아키텍처 가이드는 앱 마이그레이션과 라이브러리 마이그레이션을 통해 새로운 아키텍처를 지원하는 방법을 다룬다.

이 가이드의 발전 과정에 관심이 있거나 피드백을 제공하고 싶다면, 이 풀 리퀘스트를 통해 확인할 수 있다.

예제 마이그레이션​

코드로 직접 따라가며 실습하고 싶은 개발자를 위해 두 가지 예제 저장소를 준비했다.

RNNewArchitectureApp​

이 저장소는 React Native 버전 0.67의 레거시 아키텍처에서 새로운 아키텍처와 최신 React Native 버전으로 앱, 네이티브 모듈, 네이티브 컴포넌트를 마이그레이션하는 방법을 보여주기 위해 만들어졌다. 각 커밋은 독립적인 마이그레이션 단계에 해당한다.

앱 마이그레이션 단계 예시
RNNewArchitectureApp 저장소의 마이그레이션 커밋 목록

이 저장소는 다음과 같이 구성되어 있다:

  • main 브랜치에는 코드는 없지만 다른 브랜치를 소개하는 README.md 파일이 있다.
  • 특정 React Native 버전에서 다른 버전으로 마이그레이션하는 과정을 보여주는 여러 마이그레이션 브랜치가 있다.

일부 마이그레이션 브랜치에는 RUN.md 파일이 포함되어 있다. 이 파일은 각 커밋에서 적용된 정확한 단계를 더 읽기 쉬운 형태로 설명한다.

이 예제를 최신 안정 버전과 동기화하여 React Native의 각 마이너 릴리스에 대한 마이그레이션을 추가할 계획이다. 단계 중 문제가 발견되면 저장소에 이슈를 등록해 주길 바란다. 이 작업은 대부분의 React Native 사용자가 새로운 아키텍처로 마이그레이션했다고 판단될 때까지 계속될 것이다.

RNNewArchitectureLibraries​

마찬가지로, 이 저장소는 TurboModule과 Fabric 컴포넌트를 만드는 방법을 단계별로 안내한다. 이 저장소는 새로운 아키텍처와 기존 아키텍처 간의 하위 호환성을 보장하는 데 중점을 둔다.

이 저장소는 이전 저장소와 유사한 방식으로 구성되어 있다:

  • main 브랜치에는 코드가 없고, 다른 브랜치를 소개하는 README.md 파일만 있다.
  • TurboModule과 Fabric 컴포넌트를 개발하는 방법을 보여주는 다른 브랜치들이 있다.

이 예제는 React Native의 새로운 릴리스, 특히 라이브러리 개발에 영향을 미치는 릴리스에 맞춰 업데이트할 계획이다. 또한 고급 기능(예: 커맨드 구현, 이벤트 에미터, 커스텀 상태 사용)을 활용하는 방법에 대한 예제를 추가할 예정이다. 오류를 발견하면 예제 저장소에 이슈를 제출해 주기 바란다.

지원​

커뮤니티가 새로운 아키텍처에 대해 질문하고 업데이트를 받을 수 있도록 전용 워킹 그룹을 만들었다. 라이브러리 관리자라면 이곳에서 질문에 대한 답변을 찾고, 요구 사항을 공유할 수 있는 유용한 리소스다. 참여하려면 이 가이드를 따라주면 된다. 누구나 환영한다.

워킹 그룹은 다음과 같은 섹션으로 구성되어 있다:

  • 공지사항: RN 새로운 아키텍처 롤아웃의 주요 이정표와 업데이트를 공유하는 공간
  • 심층 분석: 기술적 주제와 심층 분석에 대해 논의하는 공간
  • 문서: 새로운 아키텍처 문서와 마이그레이션 자료에 대해 논의하는 공간
  • 라이브러리: 서드파티 라이브러리와 새로운 아키텍처로의 마이그레이션 과정에 대해 논의하는 공간
  • Q&A: 새로운 아키텍처 관련 질문을 커뮤니티에 묻는 공간
  • 릴리즈: 릴리즈 관련 버그와 빌드 문제에 대해 논의하는 공간

이 그룹을 효과적으로 활용하려면:

  • 라이브러리가 라이브러리 섹션에 등록되어 있는지 확인한다. 이를 통해 라이브러리의 마이그레이션 상태를 공유하고, 라이브러리 작성자가 겪는 어려움을 이해해 더 나은 지원을 제공할 수 있다.
  • 문제가 발생해 지원이 필요하다면 Q&A 섹션을 활용한다. 팀과 커뮤니티 전문가들이 모니터링하며 최선을 다해 지원할 것이다.
  • 다른 섹션에서 자신에게 영향을 미칠 수 있는 주제를 주시한다. 새로운 릴리즈가 당신이 찾던 API를 제공할 수도 있다. GitHub에서 특정 토론을 구독할 수 있다.

이 그룹은 새로운 아키텍처가 기본으로 활성화되고 주요 라이브러리들이 모두 마이그레이션될 때까지 지원할 계획이다.

주요 라이브러리의 마이그레이션 현황​

라이브러리 관리자들이 워킹 그룹에서 마이그레이션 진행 상황을 공유하고 있다. 이를 간략히 정리하면 다음과 같다:

다음 단계​

React Native 커뮤니티가 새로운 아키텍처를 채택할 수 있도록 적극적으로 지원할 예정이다. 구체적으로 다음과 같은 계획을 진행한다:

  • 워킹 그룹에서 최선의 지원을 제공한다.
  • RNNewArchitecture 저장소에 새로운 아키텍처로 놀라운 결과를 달성하는 방법에 대한 더 많은 예제를 추가한다.
  • 새로운 아키텍처에 대한 명확하고 최신의 문서를 제공한다.
  • 워킹 그룹에서 필수 React Native 라이브러리의 마이그레이션 상태를 추적한다.
  • 개발자들이 마이그레이션을 더 쉽게 진행할 수 있도록 경로를 단순화한다.

또한 React Native 0.69 버전은 새로운 아키텍처 채택을 위한 앱 및 라이브러리 개발자의 개발 경험을 개선할 예정이다. 0.69.0 릴리스에 대한 자세한 정보는 여기에서 확인할 수 있다.

새로운 아키텍처와 함께 만들어갈 미래가 기대된다!