React Native 0.77 업데이트로 살펴보는 스타일과 템플릿의 변화

React Native 생태계가 뉴 아키텍처 정착 이후 웹 표준 정합성과 네이티브 개발 환경 현대화에 속도를 내고 있습니다. React Native 0.77은 웹 프론트엔드 개발자에게 친숙한 CSS 스타일 속성을 엔진 수준에서 확장하고, iOS 신규 프로젝트 기본 언어를 Swift로 전환하는 등 실질적인 개발 경험을 개선했습니다. 이어지는 최신 버전 흐름까지 연결해 보면 모바일 컴포넌트 작성 방식이 웹 React와 얼마나 가까워졌는지 명확히 드러납니다.

웹 표준과 맞닿은 새로운 CSS 스타일 지원

기존 React Native 환경에서는 웹 CSS 규격 중 일부만 변형되어 지원되었기 때문에 레이아웃 계산이나 시각적 테두리 처리에 우회 방식이 자주 필요했습니다. 0.77 버전부터는 뉴 아키텍처 환경을 기반으로 boxSizing: 'border-box'와 display: 'contents' 같은 핵심 레이아웃 속성을 공식 지원합니다. 테두리 바깥에 별도 선을 긋는 outline 관련 속성과 블렌딩 효과를 주는 mixBlendMode도 함께 추가되었습니다.

React Native 0.77 기준 스타일 작성 예시입니다.

tsx

import { StyleSheet, View, Text } from 'react-native';

export function Card() {
  return (
    <View style={styles.card}>
      <Text>웹과 동일한 박스 모델 적용</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    boxSizing: 'border-box',
    outlineColor: '#0066cc',
    outlineWidth: 2,
    outlineStyle: 'solid',
    padding: 16,
  },
});

웹 컴포넌트 레이아웃 스타일을 거의 수정 없이 모바일 뷰로 옮겨올 수 있게 되었습니다.

Swift 템플릿 전환과 안드로이드 플랫폼 대비

네이티브 빌드 레이어에서도 오랜 숙원 작업들이 반영되었습니다. 신규 템플릿을 생성할 때 iOS 기본 프로젝트 파일이 Objective-C 대신 Swift로 생성됩니다. 네이티브 모듈이나 AppDelegate 설정을 만져야 했던 개발자가 더 간결하고 안전한 Swift 코드로 네이티브 설정을 다룰 수 있게 된 셈입니다.

안드로이드 영역에서는 최신 기기 사양에 맞춘 16KB 메모리 페이지 호환성이 공식 적용되었습니다. 최신 안드로이드 OS 규격 대응을 준비하는 팀이라면 네이티브 라이브러리 충돌 걱정을 덜 수 있습니다. 디버깅 체계 또한 기존의 Metro 터미널 로그 스트리밍을 정리하고 표준 Chrome DevTools Protocol 방식으로 창구를 일원화했습니다.

모바일로 이어지는 React 19 기능

스타일 확장 이후 0.78 버전으로 이어지는 흐름에서는 React 19 지원이 본격화되었습니다. forwardRef로 감싸지 않고도 컴포넌트 프롭으로 ref를 곧바로 전달할 수 있고, useActionState 같은 비동기 트랜지션 훅을 모바일 화면 로직에 그대로 배치할 수 있습니다. 바벨 플러그인을 통한 리액트 컴파일러(React Compiler) 도입 지원도 쉬워져 번거로운 메모이제이션 작업 부담이 줄어들고 있습니다.

도입 판단과 마이그레이션 기준

새로 추가된 CSS 속성들은 뉴 아키텍처 렌더러인 Fabric 위에서만 동작합니다. 레거시 브릿지 방식을 유지하고 있는 프로젝트라면 0.77로 패키지 버전을 올려도 새 스타일 속성이 렌더링되지 않으므로 아키텍처 마이그레이션 준비가 선행되어야 합니다. 이미 뉴 아키텍처를 활성화했거나 신규 앱을 구축하는 단계라면 0.77 이상을 도입해 웹 코드 공유성과 레이아웃 작성 속도를 즉시 챙기는 편이 유리합니다.

rereactnative.dev

React Native Official Blog - Version 0.77

Today we are excited to release React Native 0.77!