반응형 Frontend/React Native19 [React Native] 리액트 네이티브 비동기 서버 통신 axios 사용법 리액트 네이티브에서 비동기로 서버와 통신하는 방법중에 axios에 대해 알아보자. 비동기 서버 통신 API인 axios는 아래와 같은 형식으로 사용할 수 있다. import axios from 'axios'; axios.post('localhost:8080/api/login', { ID: "id", PASSWORD: "password" }) .then(result=>{ if(result){ Alert.alert('', '로그인 되었습니다.', [{text: '확인'}]); } }) .catch(function(error){ console.log('login catch error : '+JSON.stringify(error)); }) post 방식으로 localhost:8080/api/login 서버에 아.. 2023. 8. 23. [React Native] 리액트 네이티브 달력 날짜 사용하기 - DateTimePickerModal 리액트 네이티브에서 달력 컴포넌트를 사용하여 날짜를 선택할 수 있는 기능을 구현하기 위해 DateTimePickerModal을 사용한 예제이다. # 라이브러리 설치하기 npm install -save react-native-image-picker npm install -save react-native-community/datetimepicker # DateTimePickerModal 컴포넌트 사용하기 import {View, StyleSheet, Pressable} from 'react-native'; import DateTimePickerModal from 'react-native-modal-datetime-picker'; import {ko} from 'date-fns/locale'; import {.. 2023. 8. 14. [React Native] 이미지 업로드 하기 - 갤러리, 사진첩 이미지 리액트 네이티브로 앱을 구현할 때, 스마트폰에 있는 이미지를 업로드하는 기능이 필요한 경우 사용할 수 있는 launchImageLibrary에 대해 알아보겠습니다. (안드로이드 기준) # 먼저 launchImageLibrary를 사용하기 위해 라이브러리를 설정합니다. import {launchImageLibrary} from 'react-native-image-picker'; # 이미지를 불러오기 위한 버튼을 만들어 주고 onSelectImage()} > 이미지 추가하기 const styles = StyleSheet.create({ img: { height: 120, width: 120, marginTop: 20, marginBottom: 20, alignSelf: 'center', }, }); # 이미.. 2023. 7. 31. [React Native] 리액트 네이티브 새로고침하지 않아도 리프레쉬 - 페이지 전환 감지하여 이벤트 실행하기 리액트 네이티브에서 페이지 이동, 전환했을때 (포커스 이동) 감지하여 useEffect 함수를 실행할 수 있다. 새로고침이 일어나지 않더라도 화면이 전환됐을때, useIsFocused()를 사용하여 useEffect를 실행시킬 수 있다. import { useIsFocused } from '@react-navigation/native'; const isFocused = useIsFocused(); useEffect(() => { if(isFocused){ AsyncStorage.getItem('userInfo', (err, result) => { const resultUserInfo = JSON.parse(result); if(null !== resultUserInfo && undefined !== re.. 2023. 7. 25. 이전 1 2 3 4 5 다음 반응형