2024년 10월, React Native는 2018년부터 준비해 온 가장 큰 구조적 변화, 바로 New Architecture를 공식적으로 발표했습니다.
그동안 React Native는 Flutter나 네이티브(Android/iOS) 개발과 자주 비교되며 퍼포먼스와 네이티브 연동, UI 일관성 등 여러 측면에서 한계를 지적받아 왔습니다.
하지만 이번 업데이트는 단순한 기능 추가나 버그 픽스가 아닌 React Native의 핵심 설계 자체를 바꾸는 전환점이 되었습니다.
이 글에서는 React Native의 New Architecture가 어떤 문제를 해결하기 위해 등장했는지,
그리고 어떤 실질적인 변화와 가능성을 가져오는지를 알아보겠습니다.
New Architecture란?
New Architecture는 말 그대로 새로운 설계입니다.
그렇다면 왜 새롭게 설계를 했을까요?
After many years of building with React Native, the team identified a set of limitations that prevented developers from crafting certain experiences with a high polish. These limitations were fundamental to the existing design of the framework, so the New Architecture started as an investment in the future of React Native.
공식 문서에는 개발자들이 수년간 기존 React Native 를 사용했지만 특정 경험을 높은 완성도로 제작하는데 방해가 되는 한계를 발견하여 이러한 근본적인 문제를 해결하고자 React Native 를 새롭게 설계를 했다고 합니다.
레거시 아키텍처에서 불가능했던 기능 개선
1. 동기식 레이아웃 처리로 더 자연스러운 UI 구현
이전 RN에서는 컴포넌트의 크기와 위치를 측정하고 조정하기위해 onLayout 사용했습니다.
onLayout 은 화면에 컴포넌트가 렌더링이 끝난 후에 callback이 진행되는 형식이기에 사용자 화면에서는 깜빡임이 보일 수 있는 문제점이 있었습니다.
이러한 문제를 New Architecture 에서는 useLayoutEffect 훅 기능을 추가하여 단일 커밋에서 레이아웃 업데이트를 동기적으로 측정할 수 있도록 개선했으며 시각적인 '점프'를 피할 수 있도록 했습니다.
간단히 테스트를 진행해보면 아래와 같은 결과를 확인할 수 있습니다.
//...
function Example() {
const toolTipText = 'This is the tooltip';
const targetText = 'This is the target';
const ref = React.useRef(null);
const [index, setIndex] = React.useState(0);
const [rect, setRect] = React.useState(null);
React.useEffect(() => {
const setPosition = setInterval(() => {
setIndex((index + 1) % positions.length);
}, 1000);
return () => {
clearInterval(setPosition);
};
});
const position = positions[index];
const style = getStyle(position);
const onLayout = React.useCallback((event) => {
// Place an artificial delay to illustrate asynchronous update
wait(200);
ref.current?.measureInWindow((x, y, width, height) => {
setRect({ x, y, width, height });
});
}, []);
return (
<>
<Text style={{ margin: 20 }}>Position: {position}</Text>
<View
style={{ ...style, flex: 1, borderWidth: 1 }}
onLayout={onLayout}
ref={ref}
>
<Target
toolTipText={toolTipText}
targetText={targetText}
rootRect={rect}
position={position}
/>
</View>
</>
);
}
//...우선 onLayout 을 이용한 테스트 입니다. View의 style은 1초마다 변경하면서 Tooltip은 position: absolute 로 설정해두고 onLayout을 통해 위치값이 변경되도록 테스트를 진행했습니다.
결과 Target이 이동된 후에 Tooltip 컴포넌트가 이동됩니다.
wait 함수로 인해 스타일 적용이 더욱 지연되는 모습을 확인할 수 있는데요.
다음은 const onLayout = React.useCallback 을 useLayoutEffect 로만 변경하여 테스트를 진행해보겠습니다.
onLayout 과 달리 컴포넌트가 같이 움직이는 모습이 보입니다.
즉, useLayoutEffect 을 통해 화면을 동기적으로 관리할 수 있게되어 이전보다 안전하게 컴포넌트를 관리할 수 있게 되었습니다.
2. React 18 기능, 이제 모바일에서도 그대로 사용 가능
RN의 New Architecture는 React 18의 동시성 렌더러(Concurrent Renderer)를 정식으로 지원합니다.
그동안 웹에서만 가능했던 최신 React 기능들을 이제 모바일 앱에서도 동일하게 사용할 수 있게 되면서 웹과 네이티브 React 개발 간의 코드베이스와 개념이 더욱 일치하여 기존의 장점을 더욱 향상시켰습니다.
사용할 수 있는 대표 기능
-
자동 배칭 (Automatic Batching) 기능
여러 상태 업데이트를 한 번에 처리해 불필요한 리렌더링을 줄여줄 수 있습니다. -
startTransition 트랜젝션 기능
React 18의 동시성 기능 중 하나인 startTransition은 UI 업데이트의 우선순위를 구분할 수 있게 되어서 보다 사용자의 반응을 효과적으로 대응할 수 있게 되었습니다.
3. 빠른 JS ↔ 네이티브 통신, JSI (JavaScript Interface)
RN의 New Architecture에서는 기존의 큰 문제였던 느리고 무거운 브릿지 구조를 제거하고,
대신 JSI(JavaScript Interface)라는 새로운 방식으로 JS와 네이티브 간 통신을 처리할 수 있도록 만들었습니다.
기존에는 JS와 네이티브 간 데이터를 주고받으려면 JSON으로 직렬화 → 전송 → 역직렬화를 해야했는데 이 과정은 느리고 데이터 전송에 병목이 발생되는 문제가 있었습니다.
그래서 New Architecture 에서는 JS에서 C++ 객체를 직접 참조할 수 있게 만들었고,
그렇게 직렬화 없이 → 함수 호출이 곧바로 가능하여 데이터 처리 속도가 빨라지게 되었습니다.
그럼 이제 React Native의 성능이 확 좋아졌나요?
While the New Architecture enables these features and improvements, enabling the New Architecture for your app or library may not immediately improve the performance or user experience.
공식문서에서도 나온 내용으로는 기능 개선에 도움이 될 수 는 있지만 성능과 사용자 경험이 눈에 띄게 개선되지 않을 수도 있다고 합니다.
예를 들어 위의 동기식 레이아웃 효과같은 새로운 기능을 활용하려면 코드를 리팩토링을 해야할 수 있고,
JSI 는 Javascript 와 네이티브 메모리 사이의 오버헤드를 최소화하지만, 데이터 직렬화가 앱 성능에 병목 현상을 발생시킬 수 도 있습니다.
지금 당장은 체감 성능 차이가 크지 않더라도,
React Native는 New Architecture 를 통해 다양한 개발을 진행하고자 하는 것을 보여주었습니다.
React Native 팀뿐 아니라 Expo 팀 또한 New Architecture를 내부적으로 적극 반영하고 있고,
최근 버전에서는 Expo Go에서도 New Architecture가 기본 활성화되어 있는 등,
이 구조를 중심으로 움직이고 있으며, React Native 에서도 이제 React Native CLI 보다 Expo 사용을 더욱 권장하고 있습니다.
앞으로 나오는 기능 개선이나 성능 향상은 New Architecture 기반을 전제로 하기 때문에,
지금 당장 성능이 안나오는 것 같더라도 가능하다면 도입을 고려하고 준비하는 것도 좋을 것 같습니다.
