React Native 비동기 처리 async / await

Comp

 

import React,{Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableHighlight
} from 'react-native';

import searchApi from './searchApi';


class SearchId extends Component {

    static navigationOptions = {
        title : '아이디 찾기'
    }

    state = {
        isclick : false,
        result : "없음",
        test : new searchApi()
    }
   

    async testt (){
        
        let result2 = await this.test.request_Server()
        console.log("값11 "+ result2)

        this.setState({
            result : result2
        })

    }


    render(){

        console.log("클릭여부 "+this.state.isclick)

        // let test = new searchApi();
        // let result;

        if(this.state.isclick){
            // result =  test.request_Server()
            // console.log("결과값 "+result)

            this.testt()
            this.setState({
                isclick : !this.state.isclick
            })
        }

      
        return(
            <View style={SearchId_Style.container}>
                
                <TouchableHighlight style = {SearchId_Style.searchBtn}
                    onPress = {() => this.setState({
                        isclick : !this.state.isclick
                    })}
                >
                    <Text>아이디 찾기 </Text>
                </TouchableHighlight>

                <Text>결과 {this.state.result}</Text>
            </View>
        )
    }
}



const SearchId_Style = StyleSheet.create({

    container :{
        flex:1,
        backgroundColor : 'gray',
        justifyContent:'center',
        alignItems:'center'
    },

    searchBtn :{
        backgroundColor :'white'
    }



})

export default SearchId

    state = {
        isclick : false,
        result : "없음",
        test : new searchApi()
    }
   

    async testt (){
        
        let result2 = await this.test.request_Server()
        console.log("값11 "+ result2)

        this.setState({
            result : result2
        })

    }

searchApi Class

 

class searchApi{

    // 생성자 
    constructor(){
        //this.userData =emailAddress
    }


    // 값을 가지고 서버에 요청 하기 
    async request_Server(){


        console.log("기존 회원 정보 검색")
        const response = await fetch("http://192.168.0.224:80/eo1Project/Account/searchUserData.php",{
        
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              userEmail:"이메일",
              userPass:"비밀번호",
            })

        })


        const json = await response.json()
        console.log("UserDATA  서버전송 후 검색 결과")
        console.log('response:', json.result)

        return json.result;

    }

}


export default searchApi

 

 

 

 

개념 참고 : https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

 

코드 예시 참고 : https://www.valentinog.com/blog/await-react/