본문 바로가기

React Native3

CodePush 적용 적용 과정 AppCenter 설정 npm install -g appcenter npm install appcenter appcenter-analytics appcenter-crashes npm install react-native-code-push AppCenter 앱 생성 Appcenter 페이지에서 생성 또는 cli 활용 Appcenter 페이지 Release Type = Production Platform = React Native cli appcenter apps create -d appName-aos -o android -p react-native appcenter apps create -d appName-ios -o ios -p react-native AppCenter 로그인 appcenter.. 2022. 1. 17.
트러블 슈팅 - FlatList 최적화 문제가 되었던 사항 Flatlist로 페이지네이션한 리스트의 항목이 70개 이상이 되는 경우 눈에 띄게 버벅이는 현상 ListHeaderComponent에 넘긴 TextInput에서 한글자 입력할때마다 키보드 창이 dismiss되는 현상 해결과정 Flatlist 최적화 방법에 대하여 찾아보며 문제를 해결하였다. 1번 문제의 경우 유니크한 key값을 지정하지 않아 발생한 이슈였으며 2번 문제의 경우 인라인 함수 작성으로 인해 한글자 입력시마다 (setState 호출시마다) 상태 변화로 인해 ListHeaderComponent로 넘긴 함수가 재호출 되어 발생한 이슈였다. 기존 코드 예시 // render header const renderHeaderView = () => ( ); ... name} conte.. 2022. 1. 13.
React Native 작동방식 이해를 돕는 용어 RootView? 네이티브 화면들이 구성되는 컨테이너 역할 ( 자바스크립트 컴포넌트의 네이티브 표현방식 ) 브릿지? RootView를 포함한 대부분의 네이티브 쪽은 특정 플랫폼에 맞는 언어(Object-C 혹은 Java)로 작성되어 있다. 하지만 브릿지는 전부 C++로 작성되어 있다. 브릿지 인터페이스는 전자와 후자를 상호작용하도록 도와준다. 브릿지는 자바스크립트 -> 네이티브, 네이티브 -> 자바스크립트 두개의 엔드포인트를 가진다. UIManagerModule? 모든 자바스크립트 UI 컴포넌트와 이와 연관된 네이티브 화면 간의 맵핑 정보를 저장하고 있다. 자바스크립트 컴포넌트가 생성되거나 업데이트되거나 삭제될 때마다 이 맵핑 정보를 이용해 적절하게 관련 네이티브 뷰를 생성하거나 업데이.. 2021. 10. 7.