Translated from Korean

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

React Native 0.77アップデートで見るスタイルとテンプレートの変化

React Nativeのエコシステムは、新しいアーキテクチャの定着以降、Web標準との整合性とネイティブ開発環境のモダン化を加速させています。React Native 0.77では、Webフロントエンド開発者にとって馴染み深いCSSスタイルのプロパティをエンジンレベルで拡張し、iOS新規プロジェクトのデフォルト言語をSwiftに切り替えるなど、実質的な開発体験を向上させました。最新バージョンの流れを追っていくと、モバイルコンポーネントの記述方法がWebのReactにいかに近づいているかが明確にわかります。

Web標準に寄り添った新しいCSSスタイルのサポート

これまでのReact Native環境では、Web 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,
  },
});

Webコンポーネントのレイアウトスタイルを、ほとんど修正せずにモバイルビューへ移行できるようになりました。

Swiftテンプレートへの切り替えとAndroidプラットフォームへの対応

ネイティブビルドレイヤーでも、長年の懸案事項が反映されました。新しいテンプレートを作成する際、iOSのデフォルトプロジェクトファイルがObjective-CではなくSwiftで生成されます。ネイティブモジュールやAppDelegateの設定を調整していた開発者が、より簡潔で安全なSwiftコードでネイティブ設定を扱えるようになったということです。

Android領域では、最新のデバイス仕様に合わせた16KBメモリページ互換性が公式適用されました。最新のAndroid OS規格への対応を準備中のチームなら、ネイティブライブラリの競合を心配する必要が減ります。デバッグ体系も、これまでのMetroターミナルのログストリーミングを整理し、標準的なChrome DevTools Protocol方式に一本化されました。

モバイルへと引き継がれるReact 19の機能

スタイル拡張の後に続く0.78バージョンへの流れでは、React 19のサポートが本格化します。forwardRefでラップしなくてもコンポーネントのプロパティとしてrefを直接渡すことができ、useActionStateのような非同期トランジションフックをモバイル画面のロジックにそのまま配置できるようになります。Babelプラグインを通じたReact Compilerの導入サポートも容易になり、手間のかかるメモ化作業の負担が軽減されています。

導入判断と移行基準

新しく追加されたCSSプロパティは、新しいアーキテクチャレンダラーであるFabric上でのみ動作します。レガシーブリッジ方式を維持しているプロジェクトの場合、0.77にパッケージバージョンを上げても新しいスタイルプロパティはレンダリングされないため、アーキテクチャ移行の準備が先行して必要になります。すでに新しいアーキテクチャを有効にしているか、新規アプリを構築する段階であれば、0.77以上を導入してWebコードの共有性とレイアウト作成速度の向上を享受するのが賢明です。

rereactnative.dev

React Native Official Blog - Version 0.77

Today we are excited to release React Native 0.77!