ReactNative6 ReactNative - 뒤로가기시 useEffect 스택 네비게이션을 사용해서 화면을 구성할 때 이런 상황이 있다. 자식 컴포넌트에서 뒤로가기를 통해 부모 컴포넌트로 돌아올 때 api에서 다시 정보를 받아온다던가의 형식으로 구현하게 될 수 있다. 이 경우에는 useIsFocused() 함수를 사용하면 화면이 포커싱될 때 실행하는 useEffect 함수를 실행시킬 수 있다. import {useIsFocused} from "react-navigation/native"; const Component=({navagation})=>{ const isFocused=useIsFocused(); useEffect(()=>{ . . . },[isFocused]); } 이런 형식으로 사용하면 뒤로가기시에 혹은 새로 포커싱을 받을 때 useEffect 함수를 실행할 수 있다. 2021. 11. 17. ReactNative - 화면 길이 구하기 디바이스마다 화면의 크기가 다르기에 고정값으로 UI를 구성하면 짤리거나, 공간이 너무 남거나 하는 문제가 발생할 수 있다. 이 때 Dimensions를 사용하면 이 문제를 해결할 수 있다. import {Dimensions} from 'react-native'; const {width, height} = Dimensions.get('screen'); export default {width, height}; 이런 식으로 파일을 하나 선언해두고 import해서 width와 height를 사용하면 된다. 이때 width와 height는 각각 화면의 총 너비, 높이가 될 것이다. 2021. 11. 17. ReactNative - Firebase 연동 https://velog.io/@jinsunee/react-native-firebase-%EC%84%A4%EC%A0%95#android-%EC%84%A4%EC%A0%95 2021. 10. 22. node_modules와 깃헙 ReactNative로 개발할 때, GitHub에 push,pull을 하다 보면 자주 문제가 발생했었다. 이 문제는 GitHub에서 자동으로 생성해주는 gitignore 파일에 node_modules가 기본으로 제외되도록 설정돼있기 때문이다. 특별한 이유가 아니면 용량때문에 node_modules를 굳이 git에 올리지 않습니다. 후에 새로운 환경에서 소스를 받을 때, npm install 명령어를 수행하여 package.json에 기술된 의존성 모듈을 받는 형태로 운용합니다. package.json이 build.gradle과 비슷한 역할을 해주는 것 같습니다. 2021. 10. 15. ReactNative의 특징과 React와의 차이 졸업 프로젝트를 할 때 React Native를 사용해서 어플을 개발했습니다. 그렇다면 왜 React Native를 사용했는가? 장점 1. iOS, 안드로이드 동시 개발 가능 2. Fast Refresh - 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 적용된 화면을 확인할 수 있음 3. 작성된 코드에 따라 각 플랫폼에서 그에 알맞은 네이티브 엘리먼트로 전환되기 떄문에 큰 성능 저하 없이 개발 가능 단점 1. 네이티브의 새로운 기능을 사용하는데 오래걸림 2. 유지보수의 어려움 3. 잦은 업데이트 React와 React Native 이 두 프레임워크는 무슨 차이가 있을까? React 리액트는 가상 DOM 구조를 react-dom(DOM 렌더러)이라는 렌더러 패키지를 사용해서 물리 DOM 구조로 렌더.. 2021. 10. 13. async() 사용 React Native를 사용할때, fetch후에 setState 함수를 사용하면 원하는 값이 설정되지 않는 경우가 있었다. 그 이유는 함수가 비동기적으로 실행되기 때문인데, 이는 async()와 await를 사용해서 해결할 수 있다. useEffect(async())=>{ try{ const res = await fetch(url); const result = await res.json(); if(res.ok){ setState(result); setError(null); }else{ throw result; } } catch(error){ setError(error); } }, []}; setState, fetch, Asyncstorage.getItem 등이 비동기적으로 실행되기때문에 async와 a.. 2021. 6. 25. 이전 1 다음