반응형 React-Native8 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. [React-Native] styled-components, Unknown property: 'elevation' ts-styled-plugin(9999) 경고 제거 ⚡️Warning, Unknown property ‘…’ ts-styled-plugin(9999) 리액트 네이티브의 styled-components 라이브러리를 이용해 열심히 컴포넌트를 만들고 있는데 알 수 없는 요소라고 경고가 계속 발생했습니다. 작동은 잘 되지만 거슬리는건 못참기 때문에 좀 찾아보니 TypeScript에서 react-native만 가지고 있는 CSS 속성을 인식하지 못해 발생하는 문제였습니다. 📌 삽질 리액트 네이티브 관련 글들은 죄다 오래됐는데 그마저도 버전이 조금만 다르면 작동을 아예 안한다는 것에 질려버렸습니다. 이 문제 또한 돌고 돌아 해결했지만 23년에 RN 개발 시작하시는 분들을 위해 삽질한 것도 글에 포함해 봅니다. 🔎 지난 버전 라이브러리 $ npm install -D .. 2023. 6. 20. 반응형 이전 1 다음
오픈 채팅
