AsyncStorage 사용하기 react-native내부에서 사용할 데이터베이스를 고민하다가 리액트 네이티브에서 제공해주는 간단한 AsyncStorage는 앱 전체적으로 사용할 수 있으며 비동기적이고 지속성있고 암호화 되어 있지 않는 모듈입니다. ios에서는 네이티브 코드 뒤에서 위치하며 작은 크기는 연속적으로 저장하며 큰 데이터는 분산하여 저장합니다. 안드로이드에서는 락스디비 혹은 sqllite를 기반으로 하여 사용할 수 있습니다. error가 있으면 error를 반환하고 또는 Promise를 반환하기도 합니다. 호출하기 import { AsyncStorage } from "react-native" 저장되어 있는 데이터의 키값 가져오기 AsyncStorage.getAllKeys(); array형태로 ..

react-navigation와 Redux연결하기 이전에 react-native와 redux 를 연결한적이 있습니다. 하지만 단일페이지였는데요. 단일페이지에서는 간단히 연결했는데 여러개의 페이지가 존재할 때 어떻게 묶어두어야 할지 생각하게 되었습니다. 찾다가 겨우해결책을 찾아서 적어봅니다. http://hoony-gunputer.tistory.com/171 이전 글에서의 코드에서 변화를 주었습니다. 이전에는 createAppContainer를 바로 export default 해주었습니다. 하지만 redux를 함께 사용해주기 위해선 그러면 안됐다. 내가 찾은 해결책은 class를 만들어 주어서 store를 등록해주고 createAppContainer의 반환값을 반환해주는 방법밖에 없습니다.

react-navigation 안드로이드에서는 주로 Intent를 통해서 페이지를 이동하면서 다녔습니다. 리액트 네이티브에서는 리액트와 달리 Router가 아닌 react-navigation을 사용하여야 합니다. 하지만 이게 좀 사용하기에 까다롭다고 하는 사람이 많아서 다양한 회사에서 오픈소스로 만들었습니다. 1. facebook https://reactnavigation.org/docs/en/getting-started.html 2. Wix https://wix.github.io/react-native-navigation/#/ 몇개가 더 있긴 하지만 대표적인 두개를 소개했다. 이글에서는 facebook에서 만든 react-navigation을 사용하겠습니다. App.js App.js에서 기본적으로 있던..

react-native 개발 환경 설정하기 react native를 시작하기 위한 개발환경을 만들어 보겠습니다. 우선 expo를 사용하여 만들 것 입니다. https://expo.io/ expo의 장점 1. 소스코드가 바뀔때마다 자동으로 업로드 해줍니다. 예전 안드로이드 스튜디오로 코딩을 해줄 때는 귀찮게 코드 바꾸고 다시 run하고 기다리고를 반복했던 기억은 이제 안녕!!! 2. 업데이트할 때 편합니다. 안드로이드 어플을 배포해본적은 없지만 업데이트를 해줄 때마다 서버에 있는 소스 코드를 바꾸는 것이기 때문에 검사나 시간이 오래걸리지는 않습니다. 빠르게 업데이트가 가능합니다. expo 단점 1. 추가적인 java와 object-c코드 작성 못함 원래 react-native에서 추가적으로 object-c..

redux action연결하기 이전에는 state를 redux를 이용하여 컴포넌트와 연결했습니다. 그럼 이번에는 reducer에 정의한 action을 등록해보겠습니다. 아까전과 같이 index.js 파일에 만들어 보겠습니다. 1. bindActionCreators를 받아와서 reducer에 만들어 놨던 action이름과 매칭해서 연결해줍니다. 2. 등록된 함수가 자동으로 type을 반환해주면서 자동으로 reducer를 실행하게 됩니다. 한마디로 action을 전달해줄 때 마다 자동으로 reducer가 실행됩니다. type에 맞추어서 등록된 함수가 실행됩니다. 3. Timer 클래스에서 확인 이전과같이 props에서 받아오면 됩니다. props에서 등록된 action들을 받아오며 함수실행 시키듯이 실행하면..

App.js 스토어를 연결해줍니다. redux와 react-redux에서 createStore, Provider등을 가져와서 스토어를 만들어주고 reducer를 넣어주어서 연결시켜줍니다. 그리고 Provider에 store에 넣어줍니다. 그리고 여기서 Timer를 호출하면 Timer폴더에 index.js가 실행됩니다. Timer 컴포넌트는 이러한 파일 구조를 가지고 있습니다. 우선 index.js파일에서 connect를 불러옵니다. connect에 presenter에 있는 Timer클래스를 불러오고 state를 반환해주는 함수를 등록해줍니다. 여기서 log를 찍어보면 reducer에서 등록해놓은 state를 확인 할 수 있습니다. 그리고 연결해준 Timer에 가서는 일반적으로 state를 받듯이 prop..