React Native 0.86은 Android 15 이상에서 필수가 된 엣지투엣지 레이아웃에 대한 포괄적인 지원을 제공합니다. 2026년 6월에 출시된 이 버전은 0.85에 이어 두 번째 연속으로 브레이킹 체인지가 없으며, Android의 엣지투엣지 강제 적용으로 인해 조용히 깨지고 있던 레이아웃 및 측정 API 문제를 해결합니다.

브레이킹 체인지 없음

React Native 0.86은 0.85와의 완전한 하위 호환성을 유지합니다. 대부분의 애플리케이션에서 코드 수정이 필요하지 않아 React Native 역사상 가장 원활한 메이저 버전 전환 중 하나입니다.

Android 15의 엣지투엣지 이해하기

엣지투엣지 레이아웃은 상태 표시줄과 내비게이션 바 같은 시스템 UI 요소 아래로 콘텐츠를 확장할 수 있게 해줍니다. Android 15에서는 앱 설정과 관계없이 이 동작이 기본적으로 강제 적용됩니다. React Native 0.86은 이러한 조건에서 모든 측정 및 레이아웃 API가 올바르게 작동하도록 보장합니다.

measureInWindow 함수는 이제 엣지투엣지 모드가 활성화된 상태에서도 정확한 좌표를 반환합니다. 이전에는 측정값이 시스템 UI 요소의 높이만큼 오프셋되어 오버레이, 툴팁, 플로팅 액션 버튼에서 위치 지정 버그가 발생할 수 있었습니다.

SafeAreaHandler.tsxtypescript

import React, { useRef, useCallback } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface TooltipPosition {
  x: number;
  y: number;
}

export function SafeAreaHandler() {
  const buttonRef = useRef<View>(null);
  const insets = useSafeAreaInsets();

  const showTooltip = useCallback(() => {
    // measureInWindow now returns correct coordinates on Android 15+
    buttonRef.current?.measureInWindow((x, y, width, height) => {
      const position: TooltipPosition = {
        x: x + width / 2,
        // Coordinates are accurate even with edge-to-edge enabled
        y: y + height + 8,
      };
      console.log('Tooltip position:', position);
    });
  }, []);

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <View ref={buttonRef} collapsable={false}>
        <TouchableOpacity onPress={showTooltip} style={styles.button}>
          <Text style={styles.buttonText}>Show Tooltip</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  button: { backgroundColor: '#007AFF', padding: 16, borderRadius: 8 },
  buttonText: { color: '#FFFFFF', fontWeight: '600' },
});

collapsable={false} 속성은 View가 측정을 위한 네이티브 참조를 유지하도록 보장합니다. 이것이 없으면 React Native가 최적화 과정에서 네이티브 뷰를 제거하여 measureInWindow가 실패할 수 있습니다.

Android 15를 위한 KeyboardAvoidingView 수정

KeyboardAvoidingView 컴포넌트는 엣지투엣지 모드가 활성화된 상태에서 사용 가능한 공간을 잘못 계산하고 있었습니다. 버전 0.86에서는 사용 가능한 높이 계산에 시스템 UI 인셋을 고려하여 이 문제를 수정했습니다.

ChatInput.tsxtypescript

import React, { useState } from 'react';
import {
  KeyboardAvoidingView,
  TextInput,
  Platform,
  StyleSheet,
  View,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export function ChatInput() {
  const [message, setMessage] = useState('');
  const insets = useSafeAreaInsets();

  return (
    <KeyboardAvoidingView
      // behavior="padding" works correctly on Android 15+ edge-to-edge
      behavior={Platform.OS === 'ios' ? 'padding' : 'padding'}
      style={styles.container}
      // keyboardVerticalOffset accounts for headers and safe areas
      keyboardVerticalOffset={Platform.select({ ios: 88, android: 0 })}
    >
      <View style={styles.content}>
        {/* Chat messages would render here */}
      </View>
      <View style={[styles.inputContainer, { paddingBottom: insets.bottom }]}>
        <TextInput
          value={message}
          onChangeText={setMessage}
          placeholder="Type a message..."
          style={styles.input}
          multiline
        />
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  content: { flex: 1 },
  inputContainer: { borderTopWidth: 1, borderTopColor: '#E5E5E5', padding: 8 },
  input: { minHeight: 40, padding: 12, backgroundColor: '#F5F5F5', borderRadius: 20 },
});

Android 15에서 behavior="height"를 사용하면 레이아웃 점프가 발생하는 경우가 많습니다. padding 동작은 엣지투엣지가 활성화된 상태에서 더 부드러운 애니메이션과 예측 가능한 위치 지정을 제공합니다.

Modal이 열려 있는 동안 StatusBar 스타일과 가시성 변경이 적용되지 않는 지속적인 버그가 있었습니다. React Native 0.86은 이 문제를 해결하여 모달 플로우에서 동적 상태 표시줄 테마를 가능하게 했습니다.

ThemedModal.tsxtypescript

import React, { useState, useEffect } from 'react';
import { Modal, View, StatusBar, Text, Pressable, StyleSheet } from 'react-native';

interface ThemedModalProps {
  visible: boolean;
  onClose: () => void;
  darkMode?: boolean;
}

export function ThemedModal({ visible, onClose, darkMode = false }: ThemedModalProps) {
  // StatusBar changes now apply correctly while modal is visible
  useEffect(() => {
    if (visible) {
      StatusBar.setBarStyle(darkMode ? 'light-content' : 'dark-content', true);
      StatusBar.setBackgroundColor(darkMode ? '#1A1A1A' : '#FFFFFF', true);
    }
    return () => {
      // Restore original status bar when modal closes
      StatusBar.setBarStyle('dark-content', true);
      StatusBar.setBackgroundColor('#FFFFFF', true);
    };
  }, [visible, darkMode]);

  return (
    <Modal visible={visible} animationType="slide" onRequestClose={onClose}>
      <View style={[styles.modalContent, darkMode && styles.darkBackground]}>
        <StatusBar
          barStyle={darkMode ? 'light-content' : 'dark-content'}
          backgroundColor={darkMode ? '#1A1A1A' : '#FFFFFF'}
        />
        <Text style={[styles.title, darkMode && styles.lightText]}>
          Modal Content
        </Text>
        <Pressable onPress={onClose} style={styles.closeButton}>
          <Text style={styles.closeButtonText}>Close</Text>
        </Pressable>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  modalContent: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF' },
  darkBackground: { backgroundColor: '#1A1A1A' },
  title: { fontSize: 24, fontWeight: 'bold', color: '#000000' },
  lightText: { color: '#FFFFFF' },
  closeButton: { marginTop: 20, padding: 12, backgroundColor: '#007AFF', borderRadius: 8 },
  closeButtonText: { color: '#FFFFFF', fontWeight: '600' },
});

이 수정은 설정 화면이나 이미지 뷰어와 같은 모달 플로우 내에서 다크 모드 토글을 구현하는 앱에 특히 중요합니다.

React Native 면접 준비가 되셨나요?

인터랙티브 시뮬레이터, flashcards, 기술 테스트로 연습하세요.

React Native 탐색하기

DevTools 라이트 및 다크 모드 에뮬레이션

React Native DevTools는 Emulation.setEmulatedMedia 지원을 도입하여 디바이스나 에뮬레이터 설정 변경 없이 즉시 테마를 전환할 수 있게 되었습니다. 이 기능은 명령 팔레트(macOS에서는 Cmd+Shift+P, Windows/Linux에서는 Ctrl+Shift+P)를 통해 접근할 수 있습니다.

ThemeProvider.tsxtypescript

import React, { createContext, useContext, useState, useEffect } from 'react';
import { useColorScheme, Appearance } from 'react-native';

type Theme = 'light' | 'dark';

interface ThemeContextValue {
  theme: Theme;
  toggleTheme: () => void;
  colors: typeof lightColors;
}

const lightColors = {
  background: '#FFFFFF',
  surface: '#F5F5F5',
  text: '#000000',
  textSecondary: '#666666',
  primary: '#007AFF',
  border: '#E5E5E5',
};

const darkColors = {
  background: '#1A1A1A',
  surface: '#2D2D2D',
  text: '#FFFFFF',
  textSecondary: '#A0A0A0',
  primary: '#0A84FF',
  border: '#3D3D3D',
};

const ThemeContext = createContext<ThemeContextValue | null>(null);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  // DevTools emulation triggers colorScheme changes via setEmulatedMedia
  const systemColorScheme = useColorScheme();
  const [theme, setTheme] = useState<Theme>(systemColorScheme ?? 'light');

  useEffect(() => {
    // Listen for DevTools theme emulation changes
    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
      if (colorScheme) {
        setTheme(colorScheme);
      }
    });
    return () => subscription?.remove();
  }, []);

  const toggleTheme = () => setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
  const colors = theme === 'dark' ? darkColors : lightColors;

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme, colors }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme(): ThemeContextValue {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
}

에뮬레이트된 미디어 상태는 DevTools 연결이 끊어지면 초기화되므로 프로덕션 빌드는 개발 시 테마 테스트의 영향을 받지 않습니다.

기술 면접 대비: React Native 0.86과 엣지투엣지

2026년 기술 면접에서는 Android 15 호환성과 엣지투엣지 구현에 대한 관심이 점점 높아지고 있습니다. 이러한 개념을 숙달하면 최신 모바일 개발 관행에 대한 이해를 보여줄 수 있습니다. 포괄적인 면접 준비를 위해 React Native 디버깅 면접 질문 모듈을 참고하세요.

엣지투엣지 모드란 무엇이며 Android 15에서 왜 강제되는가

엣지투엣지 모드는 앱 콘텐츠를 시스템 UI 요소(상태 표시줄, 내비게이션 바, 제스처 인디케이터) 아래로 확장합니다. Android 15에서는 몰입형 경험과 플랫폼 전반에 걸친 일관된 UI를 제공하기 위해 이 동작이 기본적으로 강제 적용됩니다. 앱은 콘텐츠가 시스템 UI에 가려지지 않도록 세이프 에어리어 인셋을 처리해야 합니다.

엣지투엣지 활성화 시 measureInWindow 동작 변화

React Native 0.86 이전에는 measureInWindow가 시스템 UI 영역을 제외한 가시 윈도우 기준 상대 좌표를 반환했습니다. 엣지투엣지에서는 윈도우가 화면 가장자리까지 확장되지만 측정값이 잘못 오프셋되었습니다. 버전 0.86은 엣지투엣지 상태와 관계없이 좌표가 정확하도록 보장합니다.

Android 15에서 권장되는 KeyboardAvoidingView 동작

엣지투엣지가 활성화된 Android 15에서는 behavior="padding"을 사용하는 것이 권장됩니다. height 동작은 키보드가 나타날 때 사용 가능한 높이 계산이 변경되기 때문에 레이아웃 점프를 일으킬 수 있습니다. padding 동작은 더 부드러운 전환과 예측 가능한 위치 지정을 제공합니다.

iOS와 Android 엣지투엣지의 세이프 에어리어 인셋 차이

iOS에서는 iPhone X 이후 노치와 홈 인디케이터를 위해 세이프 에어리어 인셋이 존재해왔습니다. Android 엣지투엣지에서 인셋에는 상태 표시줄 높이, 내비게이션 바 높이, 제스처 인디케이터 영역이 포함됩니다. react-native-safe-area-context 라이브러리는 useSafeAreaInsets()를 통해 크로스 플랫폼 인셋 값을 제공합니다.

Pressable android_ripple에서 PlatformColor 지원

React Native 0.86은 android_ripple 속성에 PlatformColor 지원을 추가하여 시스템 테마 설정에 따른 동적 리플 색상을 가능하게 합니다.

ThemedButton.tsxtypescript

import React from 'react';
import { Pressable, Text, PlatformColor, Platform, StyleSheet } from 'react-native';

interface ThemedButtonProps {
  title: string;
  onPress: () => void;
}

export function ThemedButton({ title, onPress }: ThemedButtonProps) {
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.button,
        pressed && styles.pressed,
      ]}
      android_ripple={{
        // PlatformColor adapts to system theme automatically
        color: Platform.OS === 'android'
          ? PlatformColor('?attr/colorControlHighlight')
          : undefined,
        borderless: false,
        foreground: true,
      }}
    >
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    padding: 16,
    backgroundColor: Platform.select({
      android: PlatformColor('?attr/colorPrimary'),
      default: '#007AFF',
    }),
    borderRadius: 8,
    alignItems: 'center',
  },
  pressed: { opacity: 0.8 },
  text: { color: '#FFFFFF', fontWeight: '600', fontSize: 16 },
});

?attr/colorControlHighlight를 사용하면 리플 색상이 Material Design 가이드라인을 따르고 시스템 수준에서 설정된 라이트/다크 테마에 적응합니다.

Image.getSize가 정확한 치수 반환

Image.getSize 및 Image.getSizeWithHeaders 메서드는 이제 다운샘플링된 값 대신 원본 이미지 치수를 반환합니다. 이 수정은 적절한 종횡비 계산과 반응형 이미지 레이아웃 구현에 필수적입니다.

ResponsiveImage.tsxtypescript

import React, { useState, useEffect } from 'react';
import { Image, View, useWindowDimensions, StyleSheet } from 'react-native';

interface ResponsiveImageProps {
  uri: string;
  maxHeight?: number;
}

export function ResponsiveImage({ uri, maxHeight = 400 }: ResponsiveImageProps) {
  const { width: screenWidth } = useWindowDimensions();
  const [dimensions, setDimensions] = useState({ width: screenWidth, height: 200 });

  useEffect(() => {
    // getSize now returns true source dimensions, not downsampled values
    Image.getSize(
      uri,
      (width, height) => {
        const aspectRatio = width / height;
        let calculatedHeight = screenWidth / aspectRatio;
        
        // Constrain to maxHeight while maintaining aspect ratio
        if (calculatedHeight > maxHeight) {
          calculatedHeight = maxHeight;
        }
        
        setDimensions({
          width: screenWidth,
          height: calculatedHeight,
        });
      },
      (error) => {
        console.error('Failed to get image size:', error);
      }
    );
  }, [uri, screenWidth, maxHeight]);

  return (
    <View style={styles.container}>
      <Image
        source={{ uri }}
        style={{ width: dimensions.width, height: dimensions.height }}
        resizeMode="cover"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { width: '100%' },
});

이 수정으로 네이티브 모듈이나 서버 측 이미지 처리를 통해 이미지 치수를 가져오는 우회 방법이 불필요해졌습니다.

대용량 HTTP 응답에서 OutOfMemoryError 방지

NetworkingModule은 이전에 대용량 HTTP 응답을 처리할 때 OutOfMemoryError를 발생시켰습니다. 버전 0.86에서는 메모리 임계값을 초과하는 응답에 대해 청크 처리를 구현했습니다.

LargeFileDownload.tsxtypescript

import { useState, useCallback } from 'react';

interface DownloadProgress {
  loaded: number;
  total: number;
  percentage: number;
}

export function useLargeFileDownload() {
  const [progress, setProgress] = useState<DownloadProgress | null>(null);
  const [error, setError] = useState<string | null>(null);

  const downloadFile = useCallback(async (url: string): Promise<Blob | null> => {
    try {
      setError(null);
      setProgress({ loaded: 0, total: 0, percentage: 0 });

      const response = await fetch(url);
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const contentLength = response.headers.get('Content-Length');
      const total = contentLength ? parseInt(contentLength, 10) : 0;

      // NetworkingModule now handles large responses without OutOfMemoryError
      const reader = response.body?.getReader();
      if (!reader) {
        throw new Error('Response body is not readable');
      }

      const chunks: Uint8Array[] = [];
      let loaded = 0;

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        
        chunks.push(value);
        loaded += value.length;
        
        setProgress({
          loaded,
          total,
          percentage: total > 0 ? Math.round((loaded / total) * 100) : 0,
        });
      }

      const blob = new Blob(chunks);
      setProgress({ loaded, total, percentage: 100 });
      return blob;
    } catch (err) {
      const message = err instanceof Error ? err.message : 'Download failed';
      setError(message);
      return null;
    }
  }, []);

  return { downloadFile, progress, error };
}

50MB를 초과하는 파일 다운로드의 경우, 더 나은 메모리 관리를 위해 react-native-blob-util 또는 유사한 네이티브 파일 처리 라이브러리 사용을 고려하세요.

WebSocket 생성자를 통해 전달된 Cookie 헤더가 서버에 도달하기 전에 제거되고 있었습니다. 이로 인해 WebSocket 연결에서 세션 기반 인증이 불가능했습니다.

AuthenticatedWebSocket.tstypescript

type MessageHandler = (data: string) => void;
type ErrorHandler = (error: Event) => void;

interface WebSocketOptions {
  url: string;
  sessionCookie: string;
  onMessage: MessageHandler;
  onError?: ErrorHandler;
}

export function createAuthenticatedWebSocket({
  url,
  sessionCookie,
  onMessage,
  onError,
}: WebSocketOptions): WebSocket {
  // Cookie header now reaches the server correctly in 0.86
  const ws = new WebSocket(url, undefined, {
    headers: {
      Cookie: sessionCookie,
      // Additional headers as needed
      'X-Client-Version': '1.0.0',
    },
  });

  ws.onopen = () => {
    console.log('WebSocket connected with session cookie');
  };

  ws.onmessage = (event) => {
    if (typeof event.data === 'string') {
      onMessage(event.data);
    }
  };

  ws.onerror = (error) => {
    console.error('WebSocket error:', error);
    onError?.(error);
  };

  ws.onclose = (event) => {
    console.log(`WebSocket closed: ${event.code} ${event.reason}`);
  };

  return ws;
}

이 수정은 쿠키 기반 세션 관리와 실시간 기능을 함께 사용하는 애플리케이션에 중요합니다. React Native 네트워킹 면접 질문 모듈에서 WebSocket 구현 패턴을 자세히 다루고 있습니다.

결론

React Native 0.86은 브레이킹 체인지 없이 Android 15를 위한 필수 엣지투엣지 수정을 제공
measureInWindow, KeyboardAvoidingView, Dimensions가 엣지투엣지 활성화 시 올바르게 작동
Modal 컴포넌트가 표시되는 동안에도 StatusBar 업데이트 적용 가능
DevTools 테마 에뮬레이션으로 다크 모드 개발 및 테스트 가속화
android_ripple의 PlatformColor 지원으로 테마 인식 터치 피드백 구현
Image.getSize가 반응형 레이아웃을 위해 정확한 원본 치수 반환
대용량 HTTP 응답에서 OutOfMemoryError가 더 이상 발생하지 않음
WebSocket Cookie 헤더가 예상대로 서버에 도달

연습을 시작하세요!

면접 시뮬레이터와 기술 테스트로 지식을 테스트하세요.

무료 계정 만들기

React Native 0.86 완벽 가이드 2026: Android 15 엣지투엣지 지원과 DevTools 활용법

Android 15의 엣지투엣지 이해하기

Android 15를 위한 KeyboardAvoidingView 수정

React Native 면접 준비가 되셨나요?

DevTools 라이트 및 다크 모드 에뮬레이션

기술 면접 대비: React Native 0.86과 엣지투엣지

엣지투엣지 모드란 무엇이며 Android 15에서 왜 강제되는가

엣지투엣지 활성화 시 measureInWindow 동작 변화

Android 15에서 권장되는 KeyboardAvoidingView 동작

iOS와 Android 엣지투엣지의 세이프 에어리어 인셋 차이

Pressable android_ripple에서 PlatformColor 지원

Image.getSize가 정확한 치수 반환

대용량 HTTP 응답에서 OutOfMemoryError 방지

결론

연습을 시작하세요!

관련 기사

React Native와 TypeScript 2026: 타입 안전한 아키텍처와 면접 질문

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

Expo Router로 배우는 React Native 파일 기반 내비게이션 완벽 가이드

Android 15의 엣지투엣지 이해하기

Android 15를 위한 KeyboardAvoidingView 수정

Modal 표시 중 StatusBar 업데이트

React Native 면접 준비가 되셨나요?

DevTools 라이트 및 다크 모드 에뮬레이션

기술 면접 대비: React Native 0.86과 엣지투엣지

엣지투엣지 모드란 무엇이며 Android 15에서 왜 강제되는가

엣지투엣지 활성화 시 measureInWindow 동작 변화

Android 15에서 권장되는 KeyboardAvoidingView 동작

iOS와 Android 엣지투엣지의 세이프 에어리어 인셋 차이

Pressable android_ripple에서 PlatformColor 지원

Image.getSize가 정확한 치수 반환

대용량 HTTP 응답에서 OutOfMemoryError 방지

WebSocket Cookie 헤더 수정

결론

연습을 시작하세요!

관련 기사

React Native와 TypeScript 2026: 타입 안전한 아키텍처와 면접 질문

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

Expo Router로 배우는 React Native 파일 기반 내비게이션 완벽 가이드