본문 바로가기

React-Native10

React Native Lazy Loading으로 앱 시작 속도 개선하기 📒 React Native Lazy Loading으로 앱 시작 속도 개선하기이번에 회사에서 앱 성능 개선 작업 업무를 하며 시작 속도 개선을 위해 Lazy Loading을 도입했습니다.그 과정에서 앱 시작 속도를 2~3배 개선하는 성과도 있었고, 이걸 측정하고 분석하느라 RN 구동 방식에 대해서도 깊게 파악하며 이리저리 공부가 많이 된 것 같습니다.그럼 react native에서의 Lazy Loading과 적용을 통한 속도 개선, 측정 방식까지 소개드립니다.📌 React Native 앱이 실행될 때React Native로 빌드한 앱은 기본적으로 내부에 단일 번들 파일이 존재합니다.이 번들 파일은 앱을 실행할 때 entry point인 index.js에서부터 모든 import를 타고 들어가 전체 JS .. 2025. 5. 19.

react-native-performance로 앱 시작 시간 측정하기 📒 react-native-performance로 앱 시작 시간 측정하기이번에 회사에서 앱 성능 개선 업무를 맡아 정말 열심히 했습니다.그 과정에서 앱 시작 속도도 정말 크게 개선되었는데, 수치로 보여주지 않으면 그저 감일뿐이겠죠? 수치화를 하려고 프로파일링 도구들을 많이 찾아보다 react-native-performance라는 패키지를 선택하게 되었습니다.가장 주요한 이유는 Cold Start 시 앱 번들 로드 시간을 측정할 수 있기 때문입니다.그럼 세팅부터 초기 번들 로드 시간 + 초기 화면 렌더링 시간 프로파일링까지 소개드립니다.📌 설치https://shopify.github.io/react-native-performance/$ yarn add @shopify/react-native-perfor.. 2025. 5. 17.

react-native 버전 업그레이드 가이드, v0.69 to v0.78 📒 react-native 버전 업그레이드 가이드, v0.69 to v0.78최근에 현재 개발하는 리액트 네이티브 앱의 버전을 업그레이드하는 업무를 맡게 되었습니다.리액트 네이티브 버전 업은 평소에도 악명이 자자해서 지래 겁부터 먹었지만, 생각보다 일정을 넉넉하게 받게 되어 차근차근 버전을 올리다 보니 0.69 버전에서 0.78 버전까지 올리게 되었습니다. 이왕 하는 거 기존에 호환성 문제 때문에 런타임 에러를 유발하던 Hermes 엔진도 enable 한 뒤 어느 정도 런타임 에러도 잡았겠다, 마냥 두려워했던 RN 버전 업그레이드에 대한 가이드를 작성해보려 합니다. 📌 전략 세우기RN 버전을 올린다는 것은 바뀐 네이티브 코드들을 반영하고 패키지 버전을 맞춰주는 게 알파이자 오메가인 작업입니다.제가 지.. 2025. 4. 19.

2025년 React Native 현황과 CLI vs Expo 비교분석 📒 2025년 React Native 현황과 CLI vs Expo Go 비교분석2023.07.13 - [React-Native] - React Native 장단점과 CLI, Expo 비교와 후기이 글을 쓴 지도 어언 1년 하고도 6개월이 지났습니다. 그동안 플러터가 치고 올라오며 RN은 이제 죽었나 생각이 들 때마다 무언가 하나씩 등장하며 엎치락뒤치락하는 상황이 반복되었습니다.정말 짧은 시간이었지만 그동안 RN이 0.76 버전까지 올라오며 어떤 변경점들이 있었는지 알아보고, 이제는 Expo를 마음 놓고 사용해도 될지 알아보겠습니다. 📌 Hermes Enginehttps://reactnative.dev/architecture/bundled-hermesHermes는 Meta에서 개발한 React Nati.. 2025. 1. 15.

[React Native] Android Native-Module Event Listener 만들기 📒 [React Native] Android Native-Module Event Listener 만들기Native 모듈을 만드는 것은 간단하지만 여기에 Event Listener가 더해진다면?찾아보아도 딱히 참고할 만한 예제도 없고, 업무 준비와 공부도 할 겸 제가 A부터 Z까지 만들어보고 기록합니다. 📌 폴더 및 파일 생성안드로이드 네이티브 모듈을 만들기 위해서는 자바 혹은 코틀린 파일을 다음과 같은 경로로 생성해주어야 합니다./android/app/src/main/java/패키지명/ 저는 모듈의 이름을 Event로 지었습니다.📌 모듈 파일 생성// EventModule.javapackage com.패키지명.event;import android.os.Handler;import android.os... 2025. 1. 10.

[React-Native] ScrollView 스크롤 버벅임 최적화하기 ⚡ ScrollView 버벅임 현상 외주 업체에서 상품소개 페이지를 만들었다고 해서 확인을 해봤습니다. 아이폰에서는 잘 작동하지만 안드로이드에서는 스크롤이 불가능할 정도로 버벅거리는 현상이 발생했습니다. react-native의 스스로 화면 밖 요소를 최적화해주는 FlatList 를 사용해 볼까 싶었지만 일정한 포맷이 반복되는 요소들이 아니어서 결국엔 ScrollView를 사용할 수 밖에 없었습니다. 처음에는 상태 관련된 최적화가 되어 있지 않아서 발생하는 문제인 줄 알았지만, 이리저리 헤매다 결국엔 ScrollView 내부에 너무 많은 요소가 존재해 발생하는 문제라는 것을 알아냈습니다. ScrollView 내부엔 40장 이상, 총합 7mb 정도 되는 이미지들과 가벼운 컴포넌트들이 있었는데 최신 기기에서.. 2023. 10. 14.

[React-Native] BackHandler, 뒤로 가기 시 앱 종료 묻기 ⚡ React-Native BackHandler 앱 제작 중 로그인 화면이나 메인 화면에서 뒤로 가면 즉시 앱이 종료되어 불편함을 느꼈습니다. 곰곰히 생각해보니 기존에 사용하던 어플들은 앱을 종료할 때 모달창으로 한번 더 ‘종료 하시겠습니까?’ 하고 물어보던 것이 생각이 나서 적용해봤습니다. 그럼 기능부터 사용법, 문제 해결, hooks으로 분리한 과정을 설명하겠습니다. 📌 BackHandler 주요 기능 import { BackHandler } from 'react-native'; ... useEffect(()=>{ const backAction = () => { // 여기에 뒤로 가기 버튼을 눌렀을 때 수행할 작업을 정의합니다. // 작업을 수행한 후에는 true 또는 false를 반환합니다. // .. 2023. 7. 21.

[React-Native + TypeScript] Stack Navigation, 스택 네비게이션 사용법 ⚡ react-native의 네비게이션 화면에서 navigation을 이용하여 다른 화면으로 이동하곤 합니다. react web에서는 말 그대로 URL을 통한 페이지 → 페이지 의 이동이었다면 앱에서는 스크린 간 이동이 아닌 자료구조의 스택과 같이 스크린을 쌓아갑니다. 스택 네비게이터는 화면 간 전환 및 탐색 기록을 관리할 수 있는 방법을 제공합니다. 이 뿐만 아니라 네이티브 어플에서 사용하던 일부 제스처와 애니메이션도 제공해 유용하게 사용할 수 있습니다. 그럼 약간은 복잡한 StackNavigation 설정 방법을 알아보겠습니다. 📌 라이브러리 설치 // 다음과 같은 환경에서 실행했습니다. "react": "18.2.0", "react-native": "0.71.8", 리액트 네이티브의 스택 네비게이션.. 2023. 7. 18.

React Native 장단점과 CLI, Expo 비교와 후기 📒 React-Native 장단점📌 장점🔎 생산성JS로 안드로이드와 IOS 어플을 동시에 제작할 수 있습니다.🔎 CodePush를 통한 배포원하는 기능의 배포를 아무 때나 스토어를 거치지 않고 할 수 있습니다.네이티브 코드에 변동이 있을 땐 CodePush를 사용하진 못하고 스토어 업데이트를 이용해야 합니다.🔎 쉽고 빠른 UI 작성JavaScript와 리액트만 잘 알고 있다면 모바일 UI를 쉽고 빠르게 작성할 수 있습니다 📌 단점🔎 자주 실패하는 앱 구동, 너무 오래 걸리는 Build Time리액트 네이티브 프로젝트 개발 후, 시뮬레이터 또는 개발용 기기로 개발 모드를 구동을 할 때 대부분의 경우엔 문제없이 잘 작동하지만 브랜치를 변경하여 네이티브 코드에 변동 사항이 발생하거나 하면, 간혹가.. 2023. 7. 13.

이전 1 2 다음

티스토리툴바