Job/RN

[React Native, React] React 상태관리 라이브러리 Zustand

Zustand 독일어로 '상태' 라는 뜻을 가진 단어이다. React의 상태 관리를 위한 라이브러리로써, 간단하고 직관적인 API를 제공해준다. 그리고 기존 상태관리라이브러리에서 발생하던 불필요한 리렌더링을 쉽게 방지할 수 있고, provider hell 문제를 해결할 수 있다. React 혹은 React Native에서 Redux, Redux toolkit 만 사용하던 나에게는 정말 혁신적인 상태관리 라이브러리였다. Zustand의 특징 간단하고 직관적인 API 제공 기존 상태 관리 라이브러리에서 발생하던 불필요한 리렌더링을 쉽게 방지 가능 Provider Hell 문제 해결 가능 - 따로 Provider를 선언할 필요가 없다. Zustand는 타 상태 관리 라이브러리에 비해 번들 크기가 약 크게(Re..

[React Native] FlashList(RecyclerView)에 대해

Flash List https://github.com/Shopify/flash-list npm install or yarn add @shopify/flash-list 비교적 최근에 출시된듯한 라이브러리다. 2022년 1월 알파버전으로 첫 등장하였고, 0.1버전이 2022년 3월 릴리즈 된 라이브러리이다. (Chat GPT도 모르는 라이브러리다... GPT는 21년 9월정보까지 모른다 ㅜ) 마지막 커밋도 2023.4월에 적용되었다. 일단 FlashList는 RecyclerListView를 기반으로 제작이되었다. 여기서 RecyclerListView란? ReactNative에서 ListView를 구현하기위한 컴포넌트인데, FlatList와 비교가 되는 리스트이다. 데이터를 가변크기 항목으로 처리하기때문에, ..

[React Native] Release Build 후 발생하는 Axios Network Error

1. 에러 발생 Debug 모드에서 테스트를 진행하다가, 테스트를 모두 마친 후 Release 모드 테스트를 하기 위해 Apk파일을 추출하였다. 그런데 난데없이 Axios 오류가 발생하지 뭐야... PostMan에서 api를 굴렸을땐 분명히 정상적으로 작동했다. 역시나 이유를 알수가 없으니까 구글링... 2. 원인 파악 결론부터 말하자면 API 호출 주소가 HTTPS가 아닌 HTTP여서 발생하였다. 안드로이드에서는 Debug가 아닌 Release모드에서 HTTP를 사용하면 문제가 발생한다. ClearText Network Traffic ClearText는 암호화 되지 않는 데이터를 뜻한다고 한다. 고로 ClearText Network Traffic은 ClearText를 이용한 네트워크 흐름을 말하는데, ..

[React Native] 네트워크 상태 확인 (@react-native-community/netinfo)

1. 설치 //yarn yarn add @react-native-community/netinfo //npm npm install @react-native-community/netinfo 2. 사용법 import NetInfo from "@react-native-community/netinfo"; //상태확인 시작 const unsubscribe = NetInfo.addEventListener(state => { console.log("Connection type", state.type); console.log("Is connected?", state.isConnected); }); //상태확인 종료 unsubscribe(); 1. type은 현재 어떻게 네트워크에 연결되어있는지 출력해준다. (WIFI, ..

[ReactNative] yyyy-mm-dd hh:mm:ss Date포맷 getTime()시 NaN출력

1. 문제발생 React Native에서 시간차이를 구해야 했었는데, yyyy-mm-dd hh:mm:ss 형식을 Date 포맷으로 변환후 getTime을 했더니 Nan이 출력됬다. console.log('lastSave ? ' , lastTime.lastSave); //yyyy-mm-dd hh:mm:ss const tempSaveTime = new Date(lastTime.lastSave); console.log('getTime ? ' , tempSaveTime.getTime()); 대체 이유가 뭐길래...대체 왜... 이유가 뭔지 알 수가 없었다. 2.문제분석 https://3-stack.tistory.com/17 [rn] 왜 Date { NaN } 이 나왔지?🤔 new Date('2021-09-30 ..

[ReactNative] 물리 BackButton을 이용한 앱종료

1. 문제발생 앱종료를 시킬건데, 어떻게 해야 물리키로 종료할 수 있을지 생각해보고 있었다. 또한 한번 눌렀을때 토스트 메세지로 한번더 뒤로갈시 종료한다는 메세지를 띄우고자 했다. 2.문제해결과정 https://kinghell.tistory.com/225 로직은 해당 사이트에서 참조했다. //toast 출력 (cusToast.js) export const cusToast = (message, duration, position, offset) => { // Toast.show({ text: message, textStyle: styles.toastTxt, style: styles.toastWr, }); // native-base const str = `{ "message" :"`+message+`" }`;..