반응형 React-Native5 [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 다음
오픈 채팅
