React-Native Fetch(API 연동)

안드로이드는 보통 데이터 베이스 연결할때 직접연결하기보다 API 이용해서 데이터값을 주고받는다

 

Second.js

import React, {Component} from 'react';
import {StyleSheet,View, Text,TextInput, TouchableOpacity, Alert,Modal,TouchableHighlight} from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';

class Second extends Component {
    state={
        count:0,
        value:'',
        text:'',
        size:15,
      };
    render() {
        return (
            <View style={{flex:1}}>
                <View style={{width:'100%', height:'10%', alignItems: 'center'}}>{/*justifyContent는 세로로가운데정렬 */}
                    <View style={{flexDirection:'row'}}>
                        <View style={{marginTop:15,marginRight:10}}>
                            <Text>ㅅㄱ</Text>
                        </View>
                        <View>
                            <TextInput style={styles.input} onChangeText={(text) => this.setState({value:text})}/>
                        </View>
                        <TouchableOpacity onPress={this.fetchData.bind(this)}>
                        <View style={{width:50,height:50,alignItems:'center',justifyContent:'center',marginLeft:10,backgroundColor:'red'}}>
                                <Text>검색</Text>
                        </View>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.fontsizeP.bind(this)}>
                        <View style={{width:50,height:50,alignItems:'center',justifyContent:'center',marginLeft:10,backgroundColor:'#202856'}}>
                                <Text style={{color:'white'}}>+</Text>
                        </View>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={()=>{this.fontsizeM.bind(this);}}>
                        <View style={{width:50,height:50,alignItems:'center',justifyContent:'center',marginLeft:10,backgroundColor:'#202856'}}>
                                <Text style={{color:'white'}}>-</Text>
                        </View>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{width:'100%',height:'90%'}}>
                    <ScrollView>
                        <Text style={{fontSize:this.state.size}}>{this.state.text}</Text>
                    </ScrollView>
                </View>
            </View>
        );
    }

    printbible = function(){
        let bible = this.state.value;
        this.setState({text:bible});
    }
    search = function(){
        let inpp = this.state.value;
        Alert.alert('오류',inpp+"장은 없습니다.");
    }

    fontsizeP = function(){
        if(this.state.size == 25){
            Alert.alert('오류','더이상 글자를 늘릴 수 없습니다.');
        }else{
            this.state.size += 1;
            this.setState({size:this.state.size});
        }
        
    }

    fontsizeM = function(){
        if(this.state.size == 10){
            Alert.alert('오류','더이상 글자를 줄일 수 없습니다.');
        }else{
            this.state.size -= 1;
        this.setState({size:this.state.size});
        }
    }

    fetchData=()=>{
        var request = new XMLHttpRequest();
        request.onreadystatechange = (e) =>{
          if(request.readyState !== 4){
            return;
          }
          if(request.status ===200){
            console.log('success',request.responseText);
            //여기서 값 옮겨서 화면단에다가 출력할수있는방안찾기
            this.setState({
              text: request.responseText
            })
          }else{
            console.warn('error');
          }
        };
        request.open('GET','API URL 주소');
        request.send();
    }
}
export default Second;

const styles = StyleSheet.create({
    input:{
        width:200,
        borderColor:"#000000",
        borderWidth: 1
    }
});

검색 버튼을 누르면 fetchData 함수가 실행되고 API URL 주소에 나온 데이터값을 가져온다

request.status 가 200 이면 정상적으로 연결이 됐다는 뜻이고

state.text에 값을 넣어준다 값은 (request.responseText)

그리고 this.setState가 실행됐으니까 다시 render가 실행됨으로써 Text에 {this.state.text}에 값이 들어간 상태로 출력된다

 

ps. fontsizeP, fontsizeM은 글자수 줄이고 늘리는 함수임 되게 간단하게 만들어놓음

 

모르는거 있을때 공식문서 참조