새 리액트 네이티브 아키텍처 설명
작성자: LORENZO SCIANDRA
작성일: 2019/03/26
번역일: 2019/10/16
이 글은 formidable.com에 기재된 The New React Native Architecture Explained을 번역한 것입니다.
Part One: 리액트와 Codegen
2018년에 처음 발표된 리액트 네이티브 재구성 프로젝트는 페이스북이 이 크로스 플랫폼 모바일 솔루션에 오랫동안 제기되어 온 이슈에 엄청난 공을 들여서 착수한 프로젝트입니다.
이번 시리즈에서는 리액트 네이티브의 새 아키텍처의 주요 요소들에 대해서 알아보겠습니다. 코드를 보여드리기보단, 가능한한 설명에 치중하도록 하겠습니다. 또 이 프로젝트를 도입하며 저희를 흥분시켰던 것들을 공유하고자 합니다.
이 첫번째 파트에서는 이번 재구성의 일부로써 여러분이 작성할 코드에 실제로 영향을 끼칠 부분 — 리액트의 새 기능들와 Codegen에 대해서 다룹니다.
시작하기에 앞서, 기초 설명을 하겠습니다. 리액트 네이티브는 리액트(와 자바스크립트)를 사용해서 완전한 모바일 앱을 작성할 수 있는 오픈소스 크로스 플랫폼 솔루션입니다. 리액트 네이티브는 페이스북(페이스북은 리액트 네이티브를 개발자 커뮤니티들과의 협업으로 직접 개발합니다)에서뿐만 아니라, 아마존과 마이크로소프트같은 대기업들과 스타트업들에서 널리 쓰이고 있습니다.
기존의 리액트 네이티브가 어떻게 동작하는지 시각적인 이해를 위해 간단한 도표를 준비했습니다:
위 도표에서 4개의 코어 파트를 보실 수 있습니다:
- 여러분이 직접 작성하는 리액트 코드(리액트 웹 코드와 매우 흡사한) 파트
- 여러분이 작성한 코드가 시스템에서 해석된 자바스크립트 파트
- “브릿지"라고 불리는 요소들의 집합 파트
- 네이티브 파트
기존의 구조에서 중요한 역할을 하는 두 영역은 자바스크립트와 네이티브 영역인데, 이 둘은 서로 잘 인지하지 못합니다. 서로 소통하려면, 비동기 JSON 메세지들을 브릿지를 통해서 네이티브 코드에 전달해야만 하는데, 메세지에 대한 응답이 온다는(혹은 언제 온다는) 보장이 없습니다.
직관적인 관점으로 만들어져 수 년동안 리액트 네이티브를 잘 맡아온 이 비동기 메세지 방식의 한계를 극복하기 위해 페이스북의 팀이 재고한 결과, 새로운 리액트 네이티브 아키텍쳐를 만들기 시작했습니다. 그 방법론에 대해서 이렇게 설명할 수 있습니다: 리액트 네이티브의 4개의 파트를 각각 개선하는 것입니다. 이 글에서는 첫번째인 리액트 파트를 개선하기 위해 어떻게 개발팀이 접근했는지 설명하겠습니다.
리액트 네이티브 팀은 동료인 리액트 코어 라이브러리 팀의 작업결과에 큰 영향을 받습니다. 이것은 새 리액트 네이티브는 작년 ReactConf 2018(여기에서 정리된 개요를 보실 수 있습니다)에서 발표된 새 기능들에 의존할 수 있다는 뜻입니다. 특히, Andrew Clark가 보여준, 리액트16.6부터 도입된 동시성 모드와 동기식 이벤트 콜백이 몇개의 중요한 low-level단의 도입을 가능하게 하였습니다. 이것에 대해서는 이 시리즈의 세번째 파트에서 다루도록 하겠습니다.
새 리액트의 기능들 중에서, 새 리액트 네이티브 아키텍처로 인해 많은 개발자들의 코드에 영향을 끼칠만하다고 지금 당장 예측가능한 부분은 Suspense를 사용하여 컴포넌트들이 선행되어야 할 부분보다 먼저 렌더링 되지 않고 기다리게끔 하는 것과, hooks를 통해 class없이 state를 사용하는 등의 리액트의 기능들을 쓰는 것입니다.
리액트 네이티브 팀은 또한 더욱 많은 정적 타입 checker를(flow나 TypeScript를 통해) 코드 안에 넣는데 몰두하고 있습니다. 특히, 그들은 CodeGen이라는 툴을 만들고 있는데, 이는 자바스크립트와 네이티브 코드간 호환을 자동화합니다. 이 제네레이터 툴은 타입처리된 자바스크립트를 원천소스로 사용할 경우 Fabric과 TurboModules(새 아키텍처의 요소들로 세번째 포스트에서 다루도록 하겠습니다)에서 (자바스크립트와 네이티브)영역 간 신뢰도 높은 메세지를 보낼 때 요구되는 인터페이스 파일들을 정의할 수 있습니다. 이 자동화는 소통에 걸리는 시간도 단축시키는데, 데이터를 매번 검증해야 할 필요가 없어지기 때문입니다.
결론적으로, 리액트 네이티브 아키텍처의 첫번째 파트를 새로운 구조로 도입하면 아래와 같습니다:
이것을 끝으로 리액트 네이티브 새 아키텍처 탐구의 첫번째 파트를 마치도록 하겠습니다. 빠른 시일 내에 다음 포스트들도 올리도록 하겠습니다. 그동안 이 글을 동료 개발자들에게 공유하는 것을 잊지 마세요. 또한 트위터 계정을 통해 질문을 하셔도 됩니다. (DM도 가능합니다).
설명드린 부분에서 새 아키텍처의 다른 파트들에도 많은 발전 가능성이 보이실 겁니다. 여러분이 코드를 (전혀) 다시 작성하지 않고도 이 강력한 변화가 여러분의 코드베이스에 끼칠 영향에 대해 많은 기대를 하시길 바랍니다.
다들 이 새로운 변화의 흐름에 편승하시길 바랍니다!
