(번역) 리액트 네이티브의 새로운 아키텍처 톺아보기

원문 : https://medium.com/coox-tech/deep-dive-into-react-natives-new-architecture-fb67ae615ccd

리액트 네이티브팀은 새로운 아키텍처가 2022년에 출시될 것이라고 발표했습니다. 전체 내용은 이 블로그에서 확인할 수 있습니다.

“2022년은 오픈소스의 새로운 아키텍처의 해가 될 것이다.”

릴리즈가 얼마 남지 않았기 때문에 내부에 어떤 변경 사항이 있는지, 그리고 리액트 네이티브앱에 어떤 영향을 미칠 수 있는지 이해하기 좋은 시기인 것 같습니다.

이 글은 아키텍처가 가져온 주요한 변경 사항을 다룹니다.

1. 자바스크립트 인터페이스(JSI)
2. 패브릭
3. 터보 모듈
4. 코드젠(CodeGen)

현재의 아키텍처

새로운 아키텍처를 보기 전에 현재 아키텍처를 먼저 훑어보겠습니다.

이 글은 새로운 아키텍처와 관련된 요점만 다루고 있습니다. 현재 아키텍처에 대해 더 자세히 알고 싶다면 Bianca Dragomir의 글을 참고하세요.

간단히 말해서..

리액트 네이티브 앱을 실행하면 모든 자바스크립트 코드는 자바스크립트 번들이라 불리는 패키지에 번들링됩니다. 네이티브 코드는 별도로 보관되게 됩니다.

리액트 네이티브 앱의 실행은 총 3개의 스레드를 통해 발생합니다.

1. 자바스크립트 스레드: 자바스크립트 엔진에서 자바스크립트 번들을 실행하는데 사용
2. 네이티브/UI 스레드: 네이티브 모듈을 실행하고 UI 렌더링, 사용자 제스처 이벤트와 같은 작업을 처리하는데 사용
3. 섀도우 스레드: 호스트 화면에서 요소를 렌더링하기 전에 요소의 레이아웃을 계산하는데 사용

자바스크립트와 네이티브 스레드간의 통신은 브릿지를 통해 수행됩니다. 브릿지를 통해 데이터를 보낼 때는 일괄 처리(최적화)와 JSON으로 직렬화를 해야 합니다. 브릿지를 통한 통신은 비동기 통신만 가능합니다.