들어가며

관심은 엄청나게 많았지만, 공부는 일부러 하지 않았어요. 어차피 뉴아키텍쳐가 나오는건 한참 뒤의 일이고 의사결정 과정에서 많은 것들이 바뀔 수도 있다고 생각했습니다. (하지만 이제는 진짜 나와버렸다 뉴-아키텍쳐). 앞으로 React Native가 얼마나 더 빨라질지, 또 생태계에 어떤 영향이 있을 지 기대됩니다.

이 글에서는 0.76의 다른 주요 변경사항도 다룰 계획입니다. 새로운 DevTool이나 BoxShadow, Filter 스타일도 상당히 기대가 되는 기능들이기 때문입니다.

2018년에 처음 얘기가 되었고, 2021년에 New architecture working group이 만들어졌습니다. 지금이 2024년이니 6년동안 RN을 처음부터 재설계 했다고 보면 될 것 같아요. 그렇다면 0.76과 뉴 아키텍쳐에서는 과연 뭐가 달라질까요?

뉴 아키텍쳐란 무엇인가

자세한 설명에 들어가기에 앞서, 기존의 아키텍쳐는 무엇이 문제였길래? 뉴 아키텍쳐가 탄생한 배경에 대해서 말씀드리겠습니다.

Old architecture

React Native는 react로 작성된 코드를 native로 바꿔주는 도구입니다. 이 과정에서 컴포넌트를 그리거나 네이티브 함수의 호출이 필요할 때 Async Bridge라는 것을 활용했습니다. 이 브릿지에서 명령들이 직렬화되고 큐에 넣어지게 되고, 비동기로 처리되는 것입니다. 이렇게 사용한 이유는 모든 작업이 JS가 아닌 네이티브 스레드에서 실행되기 때문에 JS가 업데이트되는 동안 네이티브의 호출을 차단하지 않았기 때문입니다.

그러나 이렇게 하고 나니 3가지정도 주요한 이슈가 생겼는데요,

유저 인터렉션과 동기적인 처리가 불가능함.

→ 스위치, 스크롤 제어, controlled textinput 버그 등
잦은 브릿지 통신은 60FPS를 안정적으로 제공하지 못함, 경우에 따라서는 시각적 UI 점프 버그 발생

→ 현재 meta에서 개발하고 있는 visionOS 앱 등에서는 치명적
concurrent모드 지원에 대한 제약

→ 기존에는 UI의 사본을 보관하고 이를 변형하기 때문에 단일 스레드에서만 계산이 가능했음. 이로 인해서 긴급한 업데이트(우선순위)처리가 불가능했고 레이아웃을 동기적으로 읽을 수 없었음(eg. 툴팁의 위치를 업데이트하기 위해 레이아웃 효과를 읽는 것)