본문 바로가기

react-native6

[React Native CLI] - Simulator 연동(android, ios) React Native CLI - Simulator 연동(android, ios) expo 를 사용하지 않고 react-native CLI로 앱을 실행하고, 빌드, 배포해보자. 일단 react native cli를 설치한다. $ yarn global add react-native-cli 또는 $ npm install -g react-native-cli 그리고 reac-native 를 초기화시킨다. 새로운 프로젝트 폴더를 만든다. $ react-native init MyReactNativeProject 1) Android 일단 안드로이드 시뮬레이터를 설치하고, react-native를 실행해보자. 참고로 mac에서 하였다. 1) 안드로이드 스튜디오를 다운받는다. 2) 우하단에 Configure 대신 SDK.. 2020. 12. 24.
[React Nativ] - 비동기 데이터 가져오기 (fetch, redux-thunk) React Native 202 - 데이터 가져오기 (fetch) 앱이 실행되자마자 서버에 있는 DB데이터를 가져와서 조회하려고 한다. 예를 들면, 아마존 홈페이지를 누르고 쇼핑탭에가면 쇼핑 상품들이 쫙 뜨는 것을 구현하고 싶다. 데이터는 메모리에 있는 것이 아니라 서버(server-side)에 있기 때문에, HTTP 의 GET 요청을 통해 데이터를 받는다. 리덕스에서 프로젝트의 액션을 보자. redux 는 기본적으로 액션 객체를 디스패치한다. ({type: ACTION_TYPE } 과 같은 액션 객체) 따라서 액션 생성자는 아래와 같이 파라미터를 받아와서 바로 액션 객체를 리턴해주는 함수였다. export const fetchProducts = (products) => { return { type: SE.. 2020. 12. 21.
[React Native] redux-thunk, Http 요청, 웹서버, DB React Native 201 - redux-thunk, Http 요청, 웹서버, DB 1 React Native App 2 Web Server 3 Database 1, 2, 3을 연동해보자. 1에서 바로 3으로 연동하는 것은 보안상 매우 위험한데, 그 중간에 미들웨어 역할을 하는 웹서버를 넣어준다. 여기서는 React Native를 위한 간단한 웹서버가 필요하므로, 이런 기능을 빨리 제공해주는 구글의 Firebase 웹서버를 적극 이용한다. 데이터 상태 관리 react-redux 에서 데이터의 상태 관리를 할 때, reducer,action 을 사용했다. 여기서 action 함수만 useDispatch 를 통해 모든 영역에서 사용할 수 있었다. 하지만, 리덕스에 등록되어 있지 않은 다른 함수도 사용하고.. 2020. 12. 20.
[React Native] 사용자가 글 수정, 삭제 React Native 105 - 사용자가 글 수정, 삭제 userProductsScreenj.js 사용자가 들어가서 상품을 수정하고 삭제하는 화면이다. 왼쪽에 DrawerNavigator로 이동할 수 있도록 만들어 놓았다. useCallback useCallback 은 함수를 재사용하고 싶을 때 사용한다. 이 때 함수 안에서 사용하는 props가 있다면 deps 배열 안에 꼭 추가 해주어야 한다. 이로써 props 가 가장 최신 상태에 있는 것을 useCallback안의 함수가 사용할 수 있게 된다. useEffect useEffect 는 상태가 변화될 때, 특정 함수를 실행시킨다. useEffect 의 두 번째 파라미터 deps에 함수를 넣을 수 있다. deps 에 특정 값을 넣게 된다면, 컴포넌트가.. 2020. 12. 15.
[React Native] Setup, Redux, Navigation 세팅 Shop App 001 1 계획 1) product overview screen : image, title, cart, detail button 2) cart detail screen 3) product detail screen 4) Navigation : shop, orders, manage products orders mange products : plus button → edit product screen 2 생성, Setup Create $ expo init wordmall Setup $ npm install --save react-native react-native-screens $ npm install --save redux react-redux react-navigation react-nav.. 2020. 6. 19.
[React Native] Expo 없이 앱 build하기 지금은 Expo에 의존하여 빌드, 모듈, 배포를 했습니다. 하지만, 더 이상 Expo에 의존하지 않으려 합니다. 또한 앱이 규모가 커지면, 다른 배포 도구가 필요합니다. 대안 Expo는 워크플로우를 관리합니다. 세팅할 것이 하나도 없고, 사용하기 편리하고, 많은 네이티브 모듈이 빌트인 되어있습니다. Expo CLI로 제어가 가능하고, Standalone app(Expo가 필요없는)이 배포가 가능합니다. 즉, 안드로이드 스튜디오나 XCode가 기술적으로 필요하지 않습니다. Expo - Bare Workflow React Natvie CLI None-Expo App None-Expo App 여전히 엑스포 패키지 불러옴 Expo 패키지 이용가능, 매뉴얼 설정 필요 설정, 관리 쉬움 자신의 것을 관리 아무 네이.. 2020. 6. 11.
728x90

티스토리툴바