React Native 0.77 출시! 새로운 기능과 주요 업데이트 정리

김정혁·2025년 1월 28일

🚀 React Native 0.77 출시! 새로운 기능과 주요 업데이트 정리 🛠️

안녕하세요, 여러분! 오늘은 React Native 0.77의 주요 업데이트 내용을 간략하게 정리해보려고 합니다. 📝 이번 버전에서는 새로운 스타일링 기능, Android의 16KB 페이지 지원, Swift 템플릿 등 다양한 변화가 포함되어 있어요. 그럼 주요 업데이트를 하나씩 살펴볼까요?

🌟 주요 하이라이트

새로운 CSS 기능 🎨
Android 16KB 페이지 지원 📱
커뮤니티 CLI 및 템플릿 업데이트 🛠️
주요 변경 사항 🔥

🎨 새로운 CSS 기능

React Native 0.77에서는 레이아웃, 사이징, 블렌딩을 더욱 간편하게 할 수 있는 새로운 CSS 속성들이 추가되었습니다. 🖌️

🧐 `display: contents`

display: contents는 요소를 레이아웃 구조에서 제거하고, 자식 요소들을 그대로 렌더링하도록 합니다. 이를 통해 불필요한 래퍼 요소를 줄이고, CSS 스타일링을 간소화할 수 있어요.

🎨 `display: contents` 스타일 적용 가능 여부

안녕하세요! 😊 display: contents을 사용하면서 스타일을 적용할 수 있는지 궁금하신가요? 함께 살펴볼게요! 🔍✨

🟢 스타일 적용 가능 여부

display: contents는 요소 자체의 레이아웃 박스를 제거하고, 자식 요소들이 부모의 직접 자식으로 렌더링되도록 합니다. 따라서, 일부 스타일은 적용이 가능하지만, 일부는 적용되지 않습니다. 🛠️

✅ 적용 가능한 스타일

텍스트 관련 스타일: color, font-size, font-weight 등 텍스트 속성은 자식 요소에 상속되어 적용됩니다. 📝
배경 색상: 배경 색상은 요소 자체에 적용되지 않지만, 자식 요소에 개별적으로 적용할 수 있습니다.

❌ 적용되지 않는 스타일

박스 모델 관련 스타일: margin, padding, border 등은 요소 자체가 박스를 생성하지 않기 때문에 적용되지 않습니다. 🚫
레이아웃 속성: display, position, flex 등 레이아웃을 조절하는 속성도 영향을 미치지 않습니다.

💡 실용적인 예시

📂 components/StyledContainer.jsx

import React from "react";
import { View, Text } from "react-native";
import "./styles/StyledContainer.css";

function StyledContainer() {
  return (
    <View className="container">
      <Text>안녕하세요!</Text>
    </View>
  );
}

export default StyledContainer;

📂 styles/StyledContainer.css

.container {
  display: contents;
  color: blue; /* 적용 가능 */
  background-color: red; /* 적용되지 않음 */
}

위 예시에서 container에 display: contents를 설정하면, color: blue는 텍스트에 적용되지만, background-color: red는 적용되지 않습니다. 🟦❌

🚀 요약

적용 가능 스타일: 텍스트 관련 속성 등 자식에게 상속 가능한 스타일
적용 불가능 스타일: 박스 모델, 레이아웃 관련 속성

display: contents는 레이아웃을 단순화하고 불필요한 래퍼 요소를 줄이는 데 유용하지만, 스타일 적용에 제한이 있으므로 필요에 맞게 신중하게 사용해야 합니다! 🧠👍

궁금한 점 있으면 언제든지 물어봐주세요! 😊✨

#해시태그 #CSS #ReactNative #프로그래밍 #WebDevelopment #스타일링 #개발자팁

📏 Box Sizing

boxSizing prop은 요소의 사이징 방식을 정의합니다. border-box와 content-box 중 선택할 수 있으며, 기본값은 border-box입니다. 이는 웹의 기본값과 다르니 유의하세요. 🛡️

📌 중요 알림:
React Native 0.77 이전 버전에서는 box-sizing 속성을 지원하지 않았습니다. 이번 업데이트로 웹 스타일링과의 일관성이 개선되었어요! 🎉

과거 동작 방식 🔄
- 레이아웃 엔진이 자동으로 border-box 방식 적용
- 개발자가 사이징 계산 방식 제어 불가
- 패딩/보더가 항상 요소 크기에 포함됨

0.77 변경 사항 🆕

// 이제 웹처럼 동작 선택 가능!
<View style={{
  boxSizing: 'content-box',
  width: 100,
  padding: 20 // → 실제 너비 140
}}>

🎨 mixBlendMode

mixBlendMode prop은 요소의 색상이 다른 요소와 어떻게 블렌딩될지를 제어합니다. 다양한 블렌딩 모드를 지원하여 더 풍부한 디자인이 가능해졌습니다.

🎚️ isolation 속성 추가
isolation: isolate를 설정하면 뷰가 별도의 스태킹 컨텍스트를 형성합니다. 특정 영역의 블렌딩 범위를 제한할 때 유용해요!

<View style={{isolation: 'isolate'}}>  {/* 이 영역 안에서만 블렌딩 */}
  <Image source={...} style={styles.image} />
  <View style={[styles.overlay, {mixBlendMode: 'multiply'}]} />
</View>

📜 Blend Mode 값 종류

모드	설명
`normal`	기본 블렌딩 없음
`multiply`	색상 값 곱셈 (어두운 효과)
`screen`	반전 색상 곱셈 후 재반전 (밝은 효과)
`overlay`	배경색에 따라 multiply/screen 조합
`darken`	더 어두운 색상 선택
`lighten`	더 밝은 색상 선택
`color-dodge`	배경 밝게 (검정색 무효화)
`color-burn`	배경 어둡게 (흰색 무효화)
`hard-light`	강한 스포트라이트 효과
`soft-light`	부드러운 스포트라이트 효과
`difference`	색상 차이 반전
`exclusion`	difference보다 낮은 대비
`hue`	소스 색조 + 배경 채도/명도
`saturation`	소스 채도 + 배경 색조/명도
`color`	소스 색조/채도 + 배경 명도
`luminosity`	소스 명도 + 배경 색조/채도

추가된 핵심 기능:

isolation 속성 사용법 예시 🔒
모든 blend mode 값 표 형식 정리 📊
웹 표준(MDN)과의 호환성 강조 🌐

✏️ Outline Props

outlineWidth, outlineStyle, outlineSpread, outlineColor 등의 속성들이 추가되어 레이아웃에 영향을 주지 않고 요소를 강조할 수 있습니다.

📱 Android 16KB 페이지 지원

React Native 0.77은 Android 16KB 메모리 페이지 크기를 완벽하게 지원합니다. 이는 성능 향상과 더불어 미래 디바이스 호환성을 준비하기 위한 중요한 업데이트입니다. 🚀

🔄 Forced Edge-to-Edge

Android 15에서 targetSdk 35로 빌드 시 강제 엣지-투-엣지 디스플레이를 지원합니다. 기존 앱의 UI가 깨지지 않도록 react-native-safe-area-context를 사용하는 것이 권장됩니다.

참고:

react-native-safe-area-context를 사용하면 강제 엣지-투-엣지 디스플레이를 자동으로 처리해줍니다.

⚠️ 16KB Page Size Support

Android 15은 16KB 메모리 페이지 크기를 지원하여, 앱의 성능을 향상시킵니다. React Native 0.77은 이를 완벽하게 지원하여 개발자들이 쉽게 테스트하고 앱을 출시할 수 있게 되었습니다. 📦

참고:

자세한 정보는 Android Developers 사이트를 참고하세요.

🛠️ 커뮤니티 CLI 및 템플릿 업데이트

React Native 0.77에서는 커뮤니티 CLI와 템플릿에 주요 변경 사항이 포함되었습니다. 🛠️

❌ `react-native init` 명령어 폐지

이제부터는 react-native init 명령어를 사용할 수 없으며, 대신 다음 명령어를 사용해야 합니다:

Expo를 사용하는 경우:
```
npx create-expo-app MyProject
```

커뮤니티 CLI를 직접 사용하는 경우:

npx @react-native-community/cli init MyProject --version latest

🟢 Swift 템플릿 도입

iOS 템플릿이 Swift로 마이그레이션되었습니다. Objective-C를 선호하는 개발자도 여전히 지원되니 참고하세요.

예시:

npx @react-native-community/cli@latest init MyProject --template swift

주의사항:

C++ 모듈과의 호환성 문제가 있을 수 있어 Objective-C++를 계속 사용해야 할 수도 있습니다.

🔥 주요 변경 사항

🔧 Breaking Changes

📉 Metro 디버깅 시스템 개편

console.log() 스트리밍 완전 제거 🚫
```
# 기존 방식 (0.76 이전)
react-native log-android
```
- CDP(Chrome DevTools Protocol) 전환 🔄
- 새로운 로깅 방법:
```
# React Native DevTools 사용
npx react-native start --devtools
```
- VS Code 확장 지원 💻
  (Expo Tools, Radon IDE) → 공식 지원 예정(2025)

🎬 일반적 변경사항

애니메이션 시스템

// 변경 전: 매 루프 종료시 상태 업데이트
// 변경 후: 상태 업데이트 중지
useNativeDriver: true 사용 시 주의 필요

레이아웃 개선 📐
- 스티키 헤더 위치 계산 정확도 ↑
- 절대 위치 지정 방식 표준화

🤖 Android 변경사항

변경 유형	세부 내용	영향 범위
Kotlin 2.0	2.0.21 버전 적용	전체 프로젝트
API 개선	`ReactHost.createSurface()` → Non-nullable	Kotlin 개발자
내부 API 제거	20+ 내부 API 사용 불가	커스텀 네이티브 모듈

🍎 iOS 변경사항

색상 관리 통일 🎨
CGColorRef → UIColor 전면 교체

의존성 로드 강화

// 필수 구현 사항
[RCTDependencyProvider loadDependencies];

C++ 버전 자동 설정 🔧
CocoaPods가 3rd party 종속성 관리

🚀 React 19 통합 현황

0.77 버전 제외 ⏳

# 0.78 미리 체험 (React 19 포함)
npx @react-native-community/cli init RN78Preview --version 0.78.0-rc.0

주요 기대 기능 🔮
- 서버 컴포넌트 지원
- 자동 메모리 관리 개선
- 새로운 DevTools 통합

🙌 감사의 말

React Native 0.77은 161명의 기여자가 참여한 1061개의 커밋으로 완성되었습니다. 모든 분들께 감사드립니다! 🎉

📚 업그레이드 가이드

React Native 프로젝트를 0.77으로 업그레이드하려면 React Native Upgrade Helper를 참고하세요. Expo를 사용하는 경우, Expo SDK 52에서 지원됩니다.

더 자세한 내용은 React Native 공식 블로그를 참고해주세요! 📖✨

#해시태그 #ReactNative #업데이트 #모바일개발 #프로그래밍 #CSS #WebDevelopment #접근성 #개발자팁

김정혁

ai가 씁니다

이전 포스트

React 19 출시 후 CRA 중단 관련 이슈 정리

다음 포스트

React Native 0.77 출시! 새로운 기능과 주요 업데이트 정리

🚀 React Native 0.77 출시! 새로운 기능과 주요 업데이트 정리 🛠️

🌟 주요 하이라이트

🎨 새로운 CSS 기능

🧐 `display: contents`

🎨 `display: contents` 스타일 적용 가능 여부

🟢 스타일 적용 가능 여부

✅ 적용 가능한 스타일

❌ 적용되지 않는 스타일

💡 실용적인 예시

📂 components/StyledContainer.jsx

📂 styles/StyledContainer.css

🚀 요약

📏 Box Sizing

🎨 mixBlendMode

✏️ Outline Props

📱 Android 16KB 페이지 지원

🔄 Forced Edge-to-Edge

⚠️ 16KB Page Size Support

🛠️ 커뮤니티 CLI 및 템플릿 업데이트

❌ `react-native init` 명령어 폐지

🟢 Swift 템플릿 도입

🔥 주요 변경 사항

🔧 Breaking Changes

📉 Metro 디버깅 시스템 개편

🎬 일반적 변경사항

🤖 Android 변경사항

🍎 iOS 변경사항

🚀 React 19 통합 현황

🙌 감사의 말

📚 업그레이드 가이드

React 19 출시 후 CRA 중단 관련 이슈 정리

content-visibility

0개의 댓글

React Native 0.77 출시! 새로운 기능과 주요 업데이트 정리

🚀 React Native 0.77 출시! 새로운 기능과 주요 업데이트 정리 🛠️

🌟 주요 하이라이트

🎨 새로운 CSS 기능

🧐 display: contents

🎨 display: contents 스타일 적용 가능 여부

🟢 스타일 적용 가능 여부

✅ 적용 가능한 스타일

❌ 적용되지 않는 스타일

💡 실용적인 예시

📂 components/StyledContainer.jsx

📂 styles/StyledContainer.css

🚀 요약

📏 Box Sizing

🎨 mixBlendMode

✏️ Outline Props

📱 Android 16KB 페이지 지원

🔄 Forced Edge-to-Edge

⚠️ 16KB Page Size Support

🛠️ 커뮤니티 CLI 및 템플릿 업데이트

❌ react-native init 명령어 폐지

🟢 Swift 템플릿 도입

🔥 주요 변경 사항

🔧 Breaking Changes

📉 Metro 디버깅 시스템 개편

🎬 일반적 변경사항

🤖 Android 변경사항

🍎 iOS 변경사항

🚀 React 19 통합 현황

🙌 감사의 말

📚 업그레이드 가이드

React 19 출시 후 CRA 중단 관련 이슈 정리

content-visibility

0개의 댓글

🧐 `display: contents`

🎨 `display: contents` 스타일 적용 가능 여부

❌ `react-native init` 명령어 폐지