React Native

JS 엔진 웹 개발자에게 익숙한 V8(크롬 엔진)은 PC 환경에 최적화되어 있다. 반면, 모바일은 배터리, CPU, 메모리가 훨씬 열악하다. 이 문제를 해결하기 위해 Facebook(Meta)이 직접 만든 엔진이 Hermes이다. 1. JIT vs AOT (가장 결정

1.1 렌더링 시스템 [DOM이 사라진 환경] 웹 개발의 핵심은 DOM (Document Object Model) 조작이다. 하지만 React Native(이하 RN)에는 DOM이 아예 존재하지 않는다. document.getElementById 같은 코드는 RN에서

네이티브 의존성 관리 웹 프로젝트에서 npm install은 모든 의존성을 해결해 준다. 자바스크립트 코드가 전부이기 때문이다. 하지만 React Native(RN) 라이브러리는 "껍데기는 JS, 알맹이는 네이티브(Swift/Kotlin)"인 상황이다. (예: 카메라,

웹은 서버에 파일을 올리면 끝이지만, 앱은 [빌드 → 서명 → 스토어 업로드 → 심사 → 출시]라는 긴 과정을 통과해야 한다. 이 과정의 핵심과 웹 개발자가 자주 활용하는 우회로(CodePush)가 있다. 먼저 웹 환경과 앱 환경에 배포 차이를 살펴보자. 1. 결과물

앱 개발에서 버전 관리와 배포 자동화는 웹과 판이하게 다른 양상을 보인다. 특히 버전 번호의 이원화는 스토어의 검수 시스템 때문에 존재한다. RN은 iOS와 Android 두 플랫폼의 버전을 동시에 관리해야 하므로, 수동으로 하면 실수가 자주 일어난다. 이를 자동화해

View RN 앱을 구성하는 가장 기본적인 컨테이너 컴포넌트이다. 웹으로 치면 `` 와 유사하지만, 기본적으로 Flexbox 레이아웃이 적용되어있다는 점이 다르다. 핵심 특징 레이아웃의 기본 단위 : 다른 컴포넌트(Text, Image 등)을 감싸거나, 레이아웃 구

Button React Native가 기본으로 제공하는, 시스템 표준 스타일의 버튼이다. 특징 Android : 꽉 찬 배경색(Filled) 버튼으로 렌더링 된다. (Material Design) iOS : 배경색 없이 파란색 글자만 있는 버튼으로 렌더링 된다. (

TextInput 사용자로부터 텍스트를 입력받는 컴포넌트이다. 웹의 ` 및 ` 기능을 모두 담당한다. React의 State(useState)와 함께 사용하여 입력값을 제어하는 패턴(Controlled Component)을 주로 사용한다. 핵심 특징 이벤트 처리 차이

ImageBackground 이미지 위에 글씨나 다른 컴포넌트를 올리고 싶을 때 사용하는 배경 이미지 컨테이너이다. 웹 CSS의 background-image와 비슷하다. View 안에 Image를 넣고 position: absolute로 띄우는 귀찮은 작업을 미리 해

React Native의 Root Wrapper 구조를 살펴보자. 웹으로 치면 App.js에서 Redux Provider, ThemeProvider, BrowserRouter 등을 중첩해서 감싸는 것과 동일한 논리이다. 또한 모바일 특유의 물리적 제약(제스처, 키보드,

RN 의 라이프 사이클은, React 와 동일하게 운영될까? 마운트, 언마운트, 리마운트 말이다. 이러한 라이프 사이클은 React 든 RN이든 동일하게 운영된다. useState, useEffect 같은 훅들이 돌아가는 시점이나 마운트, 업데이트, 언마운트의 개념은

Dimensions API React Native에서 화면 크기(너비, 높이)를 구할 때 사용하는 가장 기초적인 도구인 Dimensions API에 대해 알아보자. 개념 현재 앱이 실행되고 있는 기기의 가로, 세로 픽셀 값을 반환한다. 반환되는 단위는 픽셀(px)이

웹 개발 할 때는 node_modules랑 package-lock.json 싹 지우고 다시 깔면(Re-install) 만병통치약처럼 해결되곤 했다. 하지만 React Native(RN)에서 락 파일(lock file)을 지우는 건 매우 민감하다. package 관련

Platform API 는 React Native 가 지금 내가 돌고 있는 곳이 아이폰인지, 아니면 갤럭시인지 구별하게 해주는 아주 핵심적인 모듈이다. RN은 크로스 플랫폼 하나의 코드로 두 플랫폼을 다 잡는 게 목표지만, 디자인 가이드라인이나 네이티브 기능이 달라서

React Native 앱 개발에서 Debug(디버그)와 Release(릴리즈) 빌드는 단순히 "개발용"과 "배포용"이라는 차이를 넘어, 앱의 구동 방식과 성능 자체가 완전히 다르다. 이 둘의 기술적인 차이점과 작동 원리를 상세하게 살펴보자. Debug Build (개발 모드) 개발자가 코드를 작성하고 수정하는 과정에서 사용하는 모드이다. 편의성에 모...

BackHandler API BackHandler는 Android의 물리적/소프트웨어 뒤로 가기 버튼을 가로채서 커스텀 동작을 구현할 수 있게 해주는 API이다. 여기서 중요한 점은, BackHandler 는 Android 전용이다. ios에는 뒤로 가기 버튼이 없으므

react-native-fast-image RN 초창기부터 이미지 처리의 사실상 표준이었던 라이브러이다. React Native의 기본 `` 컴포넌트는 몇 가지 성능 문제가 있었다. 느린 로딩 : 이미지 다운로드와 캐싱이 비효율적 깜빡임 현상 : 같은 이미지를 다시

RN에서 Watchman은 Metro bundler(React Native의 기본 JS 번들러)가 파일 변경을 빠르고 효율적으로 감지하기 위해 사용하는 파일 감시(file watching) 서비스이다. Meta가 만든 오픈소스 도구로, RN 개발환경을 Hot reloa

RN의 로컬스토리지인 MMKV MMKV는 현재 React Native 생태계에서 로컬 데이터 저장소(Local Storage)의 사실상 표준(De-facto Standard)이다. 과거의 AsyncStorage를 완전히 대체하는 라이브러리로, 빠른 속도와 동기(Syn

어떤 상황에서? React Native의 스타일 엔진(Yoga)은 훌륭하지만, iOS와 Android의 렌더링 방식은 미묘하게 다릅니다. 텍스트 줄 높이 (line-height) 자간 등의 ui 확인 iOS에서는 예쁘게 가운데 정렬된 텍스트가, Android에서는 묘

개요 LegendList는 @legendapp/list 라이브러리에서 제공하는, "FlashList의 대안"으로 등장한 최신 고성능 패키지이다. React Native 생태계에서 리스트 컴포넌트의 발전 역사를 보면 3세대에 해당한다고 볼 수 있다. 1세대 : Fl

Bottom Sheet 란? 화면 하단에서 위로 올라오는 모달 형태의 UI 컴포넌트이다. 주로 모바일 앱에서 추가 정보나 옵션을 보여줄 때 사용한다. 화면을 완전히 가리지 않으며 드래그로 열고 닫을 수 있고, 상단의 기존 화면을 어둡게 처리해주는 UI이다. 거의 모든

React Native의 성능과 동작 원리를 이해하기 위해 가장 중요한 스레드 모델(Thread Model)에 대해 알아보자 React Native는 기본적으로 멀티 스레드(Multi-threaded) 구조로 작동하며, 그중 핵심은 UI 스레드와 JS 스레드이카. 이

앱을 실제 스토어에 라이브로 올리기 전에 개발팀이나 QA 팀끼리 미리 설치해 보고 테스트하는 과정은 정말 필수적이고 중요한 단계야! 완벽한 앱을 만들기 위한 필수 관문이다. 안드로이드와 iOS는 각각 Google Play 내부 테스트(Internal Testing)와

개요 React Native CLI에서 권한 관리는 네이티브(iOS/Android) 설정이 직접 들어가야 해서 처음엔 조금 까다롭게 느껴질 수 있다. 하지만 실무에서는 거의 표준처럼 쓰이는 라이브러리가 있어서, 패턴만 익히면 아주 깔끔하게 구현할 수 있다. 가장 많이

React Native 앱이 느릴 때, 가장 큰 원인은? New Architecture(Fabric + TurboModules + Bridgeless) 기준으로 정리해보자. 스레드 구조부터 정확히 짚기 Old Architecture에서는 JS ↔ Native 사이

딥링크(Deep Link)는 모바일 애플리케이션 내의 특정 화면이나 콘텐츠로 직접 이동하게 해주는 URI(Uniform Resource Identifier)이다. 앱을 단순히 실행(Launch)하는 것을 넘어, 앱 내부의 구체적인 경로(Path)와 데이터(Parame

RN에서의console.log React Native의 console.log는 일반 웹 브라우저나 Node.js보다 훨씬 느리다. 최신 버전에는 New Architecture(JSI, TurboModules)가 기본적으로 매우 안정화되었고 Hermes 엔진이 기본 탑재

단축키 & Dev 메뉴 다음의 단축키를 사용하면 매번 폰을 손에 들고 미친 듯이 흔들어서(Shake) 개발자 메뉴를 띄울 필요가 전혀 없다. iOS 시뮬레이터 (Mac) 개발자 메뉴 띄우기 : 시뮬레이터가 활성화된 상태에서 Cmd + D 키보드 숨기기/올리기

무슨 문제? FlashList로 렌더링되는 아이템들이, 평상시에는 잘 렌더링되다가 특정 화면에서 다른 화면으로 넘어올 때, 아이템들의 UI가 정상적이지 않고 찌그러져 보이는 문제이다. 평상시엔 잘 보이면서, 왜 다른 화면에서 넘어 올때만 이런 문제가 발생할까? 이유는

모바일 기기는 알다시피 데스크탑보다 용량이 매우 적다. 특히나 RN은 Hermes 엔진위에서 돌아가는데, 이 JS 엔진에 할당된 힙 메모리가 네이티브 앱 전체 메모리의 일부이다. 보통 저사양 Android 기기 기준으로 앱 전체가 쓸 수 있는 메모리가 앱당 50~200

동일한 기능의 릴리즈된 앱을 구동할 때, 일반적으로 iOS 환경이 Android 환경보다 구동 속도가 빠르고 메모리 점유율이 낮습니다. 이는 두 운영체제의 근본적인 아키텍처 및 메모리 관리 방식의 차이에서 기인하며, 주요 기술적 메커니즘은 다음과 같습니다. 1. 메모

FlashList는 Shopify에서 만든 React Native용 리스트 라이브러리다. 기존의 FlatList가 가진 성능 한계(특히 저사양 안드로이드에서의 버벅임, 스크롤 시 흰 화면)를 극복하기 위해 만들어졌다. 현재 React Native 커뮤니티에서 가장 권장

Hot updater란? React Native 앱을 위한 셀프 호스팅 업데이트 솔루션이다. 앱스토어 심사 없이, 앱의 UI나 js로직을 실시간으로 유저들에게 업데이트해주는 도구이다. 이러한 기술을 OTA(Over-The-Air)라고 한다. 과거에는 마이크로소프트가 제

개념 RN(React Native)에서 이미지 파일 이름에 @2x, @3x 같은 suffix(접미사)가 붙어 있는 건 화면 밀도(screen density / pixel ratio) 에 따라 최적화된 이미지를 자동으로 선택하기 위한 iOS 스타일의 asset scali

Navigation이란? 앱에서 사용자가 여러 화면(페이지) 사이를 이동하고 탐색할 수 있게 해주는 시스템을 의미한다. 웹에서는 `` 태그나 URL 변경으로 페이지 이동을 하지만, 모바일 앱은 화면이 하나씩 쌓이거나 탭으로 전환되는 방식이 일반적이기 때문에 네비게이션

개요 React Native의 새로운 아키텍처(New Architecture)와 최근 생태계에서 고성능 기술로 주목받는 Nitro Modules에 대해 알아보자. 2026년 현재, 이 두 기술은 React Native의 고질적인 성능 한계를 돌파하는 핵심적인 개념이다.

react-native-version-check는 사용자가 설치한 앱의 버전과 앱스토어/플레이스토어에 올라와 있는 최신 버전을 비교해서 "업데이트가 필요한지" 알려주는 라이브러리다. 주로 "강제 업데이트(Force Update)" 기능을 구현할 때 필수적으로 사용된다

개요 React Native에서 가장 까다로운 작업 중 하나를 꼽으라면 단연 애니메이션이다. 그것도 그냥 애니메이션이 아닌, 부드럽고 끊김 없이 자연스러운 60fps(혹은 120fps) 애니메이션을 구현하는 것이다. 이를 위해 사실상 표준처럼 사용되는 라이브러리, re

개요 이전 글에서 React Native 애니메이션의 기본 개념과 JS 스레드/UI 스레드 구조를 살펴봤다. 이번 글에서는 Reanimated가 어떻게 JS 스레드를 거치지 않고 60fps 애니메이션을 실현하는지, 그 내부 동작 원리와 실무에서 반드시 알아야 할 패턴

이전 글에서 Reanimated가 어떻게 JS 스레드를 거치지 않고 UI 스레드에서 애니메이션을 실행하는지 살펴봤다. 이번 글에서는 그 마지막 퍼즐 조각인 사용자 상호작용(Interaction) — 즉, 손가락의 움직임을 UI 스레드에서 어떻게 처리하는지 다룬다. 모

2편에서 useSharedValue와 useAnimatedStyle을 잠깐 다뤘지만, Reanimated는 그 외에도 다양한 훅을 제공한다. 이번 글에서는 실무에서 자주 쓰이는 훅들을 깊이 있게 정리한다. 각 훅이 언제 쓰이는지, 어떻게 동작하는지, 흔히 빠지는 함정은

2편에서 Reanimated가 UI 스레드에서 어떻게 동작하는지, 3편에서 제스처를 어떻게 UI 스레드와 동기화하는지 살펴봤다. 이번 글에서는 마지막 퍼즐 — React의 렌더링 라이프사이클과 Yoga(레이아웃 엔진)의 계산 결과를 중간에서 가로채어 애니메이션을 주입하

Reanimated 는 애니메이션 로직을 UI 스레드에서 실행시켜 60fps 의 부드러운 동작을 보장한다. 하지만 라이브러리를 잘못 사용하면 오히려 성능이 떨어지거나, 원인을 찾기 어려운 버그를 만나게 된다. 이번 글에서는 공식 문서와 실무 경험을 기반으로 Reanim

개요 Reanimated에서 useAnimatedReaction, useDerivedValue, useAnimatedStyle 같은 훅이나 외부 라이브러리(@gorhom/bottom-sheet 등) 내부의 reaction이 불필요하게 재평가·재등록될 때, 왜 그것이

개요 내 컴퓨터(Mac/Windows)의 **React Native 개발 환경이 정상적으로 갖춰져 있는지 진단하고, 문제점(에러)을 찾아주는 기능이 있다. 바로 react-native doctor 이다. React Native CLI에 내장된 개발 환경 진단 도구이다

React Native CLI 환경에서 프로덕션 레벨의 앱을 준비할 때, 사용자가 앱을 쓰다 갑자기 앱이 픽 꺼져버리는(Crash) 현상만큼 서비스에 치명적인 것은 없다. 하지만 안타깝게도 모든 상황 100% 에러가 없이 완벽하게 작동이 되진 않는다. 어떠한 이유로든

@gorhom/bottom-sheet props의 참조 안정성 @gorhom/bottom-sheet의 onChange, backdropComponent, snapPoints 같은 props에 메모이제이션된 값/함수를 넘겨야 하는 이유와, 그렇지 않았을 경우 발생하는

개요 ` 만 써도 대부분의 버튼은 동작한다. 하지만 햅틱 피드백을 정확히 누르는 순간에 주고 싶거나, 길게 누르기와 짧게 누르기를 구분하거나, 드래그 중 손가락이 버튼 밖으로 살짝 빠져나가도 클릭을 유지하고 싶다면 onPress` 하나로는 부족하다. React Na

개요 React Native CLI 프로젝트를 개발하다 보면 bundle install, bundle exec pod install, bundle exec fastlane ios beta 같은 명령을 매일 마주친다. JS 개발자에게는 낯선 Ruby 생태계지만, 실은