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