React Native 0.85 (2026): 새로운 애니메이션 백엔드, 엄격한 TypeScript API 및 면접 질문

React Native 0.85는 2026년 4월에 출시되어, 프레임워크 창설 이래 가장 중요한 애니메이션 시스템 개편을 제공합니다. 58명의 기여자가 참여한 604개의 커밋을 포함하는 이번 릴리스에서는 공유 애니메이션 백엔드(Shared Animation Backend)를 도입하고, 포스트 브리지 전환을 완료하며, 엔터프라이즈 환경을 위한 Metro TLS 지원을 추가합니다.

공유 애니메이션 백엔드: Animated와 Reanimated의 통합

React Native 0.85의 핵심 기능은 Software Mansion과의 협업으로 개발된 공유 애니메이션 백엔드입니다. 이전에는 내장 Animated 라이브러리와 커뮤니티 Reanimated 라이브러리가 각각 독립적인 조정 루프를 유지했습니다. 각 시스템이 고유한 내부 로직으로 애니메이션 업데이트를 적용하면서, 한쪽의 성능 개선이 다른 쪽에 혜택을 줄 수 없는 사일로화된 생태계를 형성하고 있었습니다.

공유 애니메이션 백엔드는 핵심 애니메이션 업데이트 로직을 React Native 렌더러에 직접 내장합니다. 애니메이션 기반 커밋이 React 및 스타일링 라이브러리와 Shadow Tree를 두고 경쟁하는 대신, 전용 메커니즘이 별도로 처리합니다.

import { Animated, Pressable, View, StyleSheet } from 'react-native';
import { useRef, useState } from 'react';

function ExpandableCard() {
  const widthAnim = useRef(new Animated.Value(120)).current;
  const heightAnim = useRef(new Animated.Value(80)).current;
  const [expanded, setExpanded] = useState(false);

  const toggle = () => {
    const toWidth = expanded ? 120 : 300;
    const toHeight = expanded ? 80 : 200;

    // Layout props with useNativeDriver — new in 0.85
    Animated.parallel([
      Animated.spring(widthAnim, {
        toValue: toWidth,
        useNativeDriver: true, // Now supports layout props
      }),
      Animated.spring(heightAnim, {
        toValue: toHeight,
        useNativeDriver: true,
      }),
    ]).start();

    setExpanded(!expanded);
  };

  return (
    <Pressable onPress={toggle}>
      <Animated.View
        style={[
          styles.card,
          { width: widthAnim, height: heightAnim },
        ]}
      />
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#61DAFB',
    borderRadius: 8,
  },
});

0.85 이전에는 width나 height와 같은 레이아웃 속성에 useNativeDriver: true를 설정하면 오류가 발생했습니다. 개발자는 부드러운 60fps 애니메이션(네이티브 드라이버 사용, transform과 opacity로 제한)과 레이아웃 변경을 위한 버벅이는 JS 스레드 애니메이션 사이에서 선택해야 했습니다. 공유 애니메이션 백엔드는 이 5년 된 제한을 근본적으로 해결합니다.

애니메이션 백엔드의 내부 동작 원리

이전에 -DRN_USE_ANIMATION_BACKEND 컴파일러 플래그 뒤에 숨겨져 있던 C++ 애니메이션 백엔드가 0.85에서는 기본적으로 활성화됩니다. 이 시스템은 두 가지 전용 업데이트 경로를 사용합니다:

• synchronouslyUpdateProps — 레이아웃이 아닌 변경 사항(opacity, transform)을 위한 빠른 경로로, 전체 Fabric 커밋 사이클을 우회합니다
• 전체 Fabric 커밋 — 레이아웃 재계산이 필요한 경우(width, height, flex, padding)에만 트리거됩니다

이 듀얼 경로 접근 방식 덕분에 단순한 opacity 페이드는 이전과 동일한 속도를 유지하면서, 레이아웃 애니메이션은 회귀 없이 네이티브 스레드 성능을 확보할 수 있습니다.

포스트 브리지 아키텍처: 브리지의 완전한 제거

React Native 0.85는 브리지 폴백이나 레거시 상호 운용 레이어가 전혀 없는 최초의 안정 릴리스입니다. JSI(JavaScript Interface) 기반의 새로운 아키텍처는 JavaScript와 네이티브 코드 간의 직접적인 동기 통신을 2ms 미만의 인터롭 지연 시간으로 제공합니다.

면접 준비를 위한 실질적 의미:

// TurboModules now lazy-load by default in 0.85
// Cold-start memory reduced by ~40%
import { TurboModuleRegistry } from 'react-native';

// Module loads only when first accessed, not at app startup
const CameraModule = TurboModuleRegistry.getEnforcing('Camera');

// Direct synchronous call via JSI — no bridge serialization
const hasPermission = CameraModule.checkPermission();

0.85에서는 TurboModules가 기본적으로 지연 로드되어 콜드 스타트 메모리가 약 40% 감소합니다. 모든 네이티브 모듈을 즉시 등록하던 스타트업 페널티가 제거됩니다. 이는 React Native 성능 최적화에 관한 면접에서 자주 출제되는 주제입니다.

Metro TLS: 개발 서버의 HTTPS 지원

기업 프록시 뒤에서 작업하거나 보안 전용 API를 테스트하는 엔터프라이즈 팀은 Metro의 HTTP 전용 개발 서버에 대한 우회 방법이 필요했습니다. Metro는 이제 TLS를 네이티브로 지원합니다:

const fs = require('fs');
const { getDefaultConfig } = require('@react-native/metro-config');

const config = getDefaultConfig(__dirname);

// Enable HTTPS + WSS (Fast Refresh over secure WebSocket)
config.server.tls = {
  ca: fs.readFileSync('./certs/ca.pem'),
  cert: fs.readFileSync('./certs/cert.pem'),
  key: fs.readFileSync('./certs/key.pem'),
};

module.exports = config;

로컬 개발 시 mkcert를 사용하면 수동 CA 설치 없이 신뢰할 수 있는 인증서를 생성할 수 있습니다. TLS가 활성화되면 Fast Refresh가 WSS를 통해 작동하여 보안 환경에서도 핫 리로드가 정상적으로 기능합니다.

주요 변경 사항 및 마이그레이션 가이드

업그레이드 시 주의가 필요한 여러 주요 변경 사항이 있습니다:

Jest 프리셋 분리 — 내장 프리셋이 @react-native/jest-preset으로 이동했습니다:

module.exports = {
  preset: 'react-native',
};

// jest.config.js — after
module.exports = {
  preset: '@react-native/jest-preset',
};

StyleSheet.absoluteFillObject 제거 — StyleSheet.absoluteFill로 대체합니다:

const overlay = StyleSheet.absoluteFillObject;

// After (0.85+)
const overlay = StyleSheet.absoluteFill;

Node.js 버전 요구 사항 — 최소 Node.js 20.19.4가 필요합니다. 버전 21과 23(모두 EOL)은 지원되지 않습니다.

텍스트 오버플로 동작 변경 — borderRadius 경계 밖의 텍스트가 기본적으로 숨겨집니다. 둥근 모서리를 넘어 표시되는 텍스트에 의존하는 컴포넌트는 명시적으로 overflow: 'visible' 스타일을 적용해야 합니다.

DevTools: 여러 디버거 동시 연결

React Native 0.85는 여러 Chrome DevTools Protocol(CDP) 연결의 동시 사용을 지원합니다. VS Code, React Native DevTools, AI 코딩 에이전트가 서로의 세션을 종료하지 않고 동시에 연결할 수 있습니다.

이는 여러 도구를 결합한 디버깅 워크플로를 사용하는 팀에 특히 관련이 있습니다. Android 네트워크 패널에서는 이전 버전에서 발생한 요청 본문 미리보기 회귀가 수정되었습니다.

Shadow Tree 커밋 브랜칭

새로운 Fabric 커밋 브랜칭 메커니즘은 React Native가 Shadow Tree에 업데이트를 커밋하는 방식을 근본적으로 변경합니다. 이전에는 애니메이션 커밋과 React 상태 업데이트가 동일한 커밋 경로를 두고 경쟁하면서, 리렌더링을 동반하는 복잡한 애니메이션 중에 프레임 드롭이 발생했습니다.

브랜칭 메커니즘은 이러한 관심사를 분리합니다. 애니메이션 백엔드는 자체 브랜치에서 작동하고, React 커밋은 독립적으로 진행됩니다. 두 브랜치는 각 프레임의 끝에서 조정되어, 애니메이션 헤더가 있는 리스트 스크롤 중에 발생하던 시각적 글리치를 방지합니다.

View Transition API (인프라)

새로운 기능 플래그 viewTransitionEnabled는 뷰 간 애니메이션 전환을 가능하게 하는 향후 View Transition API의 기반입니다. 0.85에서는 기본값이 false로 설정되어 있으며, 사용자 대상 기능이 아닌 인프라 수준의 준비 단계입니다. 이는 웹의 View Transitions API와 유사한 내장 내비게이션 전환을 향한 React Native의 방향성을 보여줍니다.

면접 질문: React Native 0.85 아키텍처

React Native 면접을 준비하는 분들을 위해 0.85 아키텍처를 반영한 핵심 질문을 정리합니다:

Q: 공유 애니메이션 백엔드가 해결하는 문제는 무엇입니까?

공유 애니메이션 백엔드는 이전에 분리되어 있던 두 개의 애니메이션 조정 시스템(Animated와 Reanimated)을 React Native 코어의 단일 엔진으로 통합합니다. 0.85 이전에는 한 시스템의 성능 최적화가 다른 시스템에 혜택을 줄 수 없었습니다. 공유 백엔드는 또한 네이티브 드라이버로 레이아웃 속성 애니메이션을 방해하던 제한을 제거합니다.

Q: 0.85에서 TurboModules가 기본적으로 지연 로드되는 이유는 무엇입니까?

스타트업 시 모든 TurboModules를 즉시 등록하면 세션 동안 사용되지 않을 수 있는 모듈에도 메모리가 소비됩니다. 지연 로드는 첫 번째 접근 시까지 인스턴스화를 지연시켜, 개발자 대상 API를 변경하지 않으면서 콜드 스타트 메모리를 약 40% 절감합니다.

Q: 애니메이션 백엔드의 두 가지 업데이트 경로를 설명하십시오.

synchronouslyUpdateProps는 Fabric 커밋을 트리거하지 않고 레이아웃이 아닌 속성 변경(opacity, transform)을 처리합니다. 애니메이션이 레이아웃 속성(width, height, padding)을 수정할 때는 적절한 레이아웃 재계산을 위해 전체 Fabric 커밋이 트리거됩니다. 이 듀얼 경로 접근 방식은 단순한 애니메이션의 성능을 유지하면서 네이티브 스레드에서의 레이아웃 애니메이션을 가능하게 합니다.

Q: Shadow Tree 커밋 브랜칭이란 무엇입니까?

커밋 브랜칭은 애니메이션 구동 Shadow Tree 업데이트와 React 상태 구동 업데이트를 독립적인 브랜치로 분리합니다. 각 브랜치는 독립적으로 커밋하고, 프레임 경계에서 조정됩니다. 이를 통해 동일한 커밋 경로를 두고 경쟁하는 React 리렌더링으로 인한 애니메이션 버벅임을 방지합니다. 이는 애니메이션 요소가 있는 리스트 스크롤에서 프레임 드롭의 일반적인 원인이었습니다.

엄격한 TypeScript API: 강제 적용을 향한 진행

React Native 0.80에서 선택적 기능으로 도입된 엄격한 TypeScript API는 기본값이 되기 위한 과정을 계속하고 있습니다. 활성화 방법:

{
  "compilerOptions": {
    "customConditions": ["react-native-strict-api"]
  }
}

엄격한 API는 수동으로 유지하는 대신 소스 코드에서 직접 타입을 생성합니다. 공개 react-native 인덱스 파일로 내보내기를 제한하여, 버전 간에 깨지는 내부 파일 경로에 대한 의존을 방지합니다. 0.85로 업그레이드하는 팀은 향후 릴리스에서의 강제 적용에 대비하여 이 플래그를 활성화하는 것이 권장됩니다.

결론

• 공유 애니메이션 백엔드가 Animated와 Reanimated를 하나의 엔진으로 통합하여, useNativeDriver: true를 사용한 레이아웃 속성 애니메이션을 최초로 실현
• React Native 0.85는 레거시 상호 운용 없이 포스트 브리지 전환을 완료하고, 지연 로드 TurboModules로 콜드 스타트 메모리를 40% 절감
• Metro TLS 지원으로 엔터프라이즈 개발 환경의 HTTPS 요구 사항 해결
• Shadow Tree 커밋 브랜칭으로 React 커밋 경쟁에 의한 애니메이션 버벅임 제거
• 엄격한 TypeScript API는 향후 강제 적용에 대비하여 지금부터 활성화해야 함
• 업그레이드 전에 주요 변경 사항(Jest 프리셋 분리, StyleSheet.absoluteFillObject 제거, Node.js 20+ 요구 사항)을 처리해야 함