HybridApp-React Native 2세대 ( 기능 -Network, GET, POST )

Android에서 Network 통신을 할경우 URL을 사용하면 데이터를 받기만 가능하다. 

그래서 추가로 HttpURLConnection 데이터를 보낼때 사용 inputStream, outputStream을 만들어야 한다.

그러나 Volley, Retrofit을 사용해서 쉽게 Network 작업을 했었다.

 

HybridApp에서도 마찬가지로  HttpURLConnection 과 같은 역할이 있다. 

바로 XMLHttpRequest 이다.

또한 Network를 쉽게 사용할 수 있도록하는 별도의 라이브러리가 있다. Fetch 라이브러리다.

XMLHttpRequest 와 Fetch 를 알아보자.

 

<최종 결과 화면>

1. XMLHttpRequest 이용하여 서버(닷홈 도메인)에 있는 js 파일 내용을 읽어온다.

2. Fetch 라이브러리를이용하여 서버(닷홈 도메인)에 있는 js 파일 내용을 읽어온다.

3. Fetch 라이브러리를이용하여 인터넷의 json 파일 내용을 읽어 온다.

3-1. 읽어온 json 값을 배열에 저장하여 map()메소드를 이용하여 보여준다.

4. fetch를 이용하여 GET 방식으로 전달

5. fetch를 이용하여 POST 방식으로 전달

---

우선 AVD를 먼저 켜놓자.

예제는 d\HyvridApp\ReactNative에서 새로 폴더(RN14NetworkFetch)를 만들어서 작업할 것이다.

만들 폴더로 접근하여 우선 run을 하자.

이제 화면에 보여줄 Main.js파일을 만들자.

버튼을 누르면 인터넷에서 파일을 읽어와서 보여줄 것이다.

우선 버튼과 text에 글씨를 변경하여 보여줄 것이므로 state변수를 이용하자.

import React, {Component} from 'react';
import {View, Text, Button, StyleSheet, ScrollView} from 'react-native';
 
export default class Main extends Component{
 
    constructor(){
        super();
        this.state={
            text:"",
        };
    }
 
    render(){
        return(
            <View style={{flex:1, padding:16}}>
                <Button title="fetch data from network" onPress={this.fetchData}></Button>
                <ScrollView style={styles.scroll}>
                    {/* Text에 보여줄 글씨는 바뀔 것이므로 state변수로 사용*/}
                    <Text style={styles.text}>{this.state.text}</Text> 
                </ScrollView>
            </View>
        );
    }//render method ..
 
    // network 작업을 하는 메소드
    fetchData=()=>{
        
    }// fetchDat method..
 
}//Main class..
 
const styles= StyleSheet.create({
    scroll:{marginTop:16, backgroundColor:'gray'},
    text:{padding:8, color:'white'}, 
});

버튼 기능을 작성하기 전에 화면에 배치가 잘되었는지 확인해보자.

닷홈의 무료호스팅을 이용하여 자신의 도메인에 접근하자. 거기에 임의 index1.js 파일을 만든다.

( 내용은 중요하지 않다. 그 파일 내용을 불러오는지 볼 것이다.)

이제 버튼을 눌렀을때 XMLHttpRequest 객체를 이용하여 서버에 있는 파일을 읽어오자.

서버의 응답은 비동기 방식이라서 데이터를 요청하고 받으면 늦을 수 있다.

먼저 받을 준비를하고 요청을 해야된다.

<실행화면> 버튼을 누르면 서버에 있는 js파일 내용을 확인할 수 있다.

이제 똑같은 기능을 fetch 라이브러리를 사용하여 구현해보자.

구분을 위해 메소드( fetchData2 )를 하나 만들어서 구현하자.

XMLHttpRequest와 달리 fetch는 .then이 있어서 작업이 수월하다. 작업이 끝나고 실행하도록 .then()에 추후 작업을 작성하면 된다.

똑같이 서버에 파일 내용을 잘 가져온다.

참고사항으로 두꺼운 화살표 함수 간략화 작업을 할 수 있다.

1.파라미터가 하나이면 ()괄호 생략 가능

2. 메소드 내용이 한줄이면 return과 ;(세미콜론) 과 {}중괄호 생략 가능

이제 json 파일도 인터넷에서 읽어보자.

facebook에서 test용 json파일을 공유하고 있다. 그 파일을 이용해보자. 

http://facebook.github.io/react-native/movies.json

fetchData2()메소드의 이전 내용은 다 주석 처리하고 새로 작성하자. ( json 파일 연습 )

해당 주소를 open하고 그 결과를 response로 받고 text로 변환한다.

그리고 그것을 다시 responseText로 받고 그것을 state변수를 갱신한다.

json 파일도 잘 받아진다.

위 코드를 아래 사진과 같이 변경 할 수 있다. 애초에 json파일을 json으로 변환하여 해당하는 키값에 대한 내용값을 가져올 수 있다.

json 내용을 배열로 저장하자. movies를 저장할 빈 배열을 만들자.

movies를 state객체의 movies에 setState시킨다.

배열 값으 보여주기 위해 map()메소드를 이용하자.

서버에 데이터 송/수신을 해보자. ( GET 방식 )

php파일에 GET 방식으로 name, msg를 보내고 php파일에서 echo시킨 값을 text에 보여주자.

RN14NetworkFetch폴더에 php_files 폴더를 만들고, php_files폴더 안에 getMethod.php 파일을 만들자.

자신의 도메인 주소에 php 폴더를 만들고 getMethod.php 파일을 서버에 업로드 하자. 

이제 POST 방식으로 데이터 송/수신 해보자. 이전 코드는 주석처리하고 다시 작성하자.

주의 : fetch() 괄호 안에 작은 따옴표가 아니다! [키보드 물결표시가 있는 키.. ESC키 밑에 있는 키다.]

php_files폴더에 postMethod.php 파일을 만들자.

해당 파일을 서버 php 폴더( 방금 전에 만든 것 ) 안에 올리자.

이전 코드는 주석처리하고 다시 작성하자.

보낼 데이터가 객체일 경우 json 문자열로 변환하여 보내자.

php_files폴더에 jsonRequest.php 파일 만들자.

해당 파일을 서버에 업로드 하자.

받은 json 데이터를 객체로 변환하여 사용해보자.

수정된 코드를 확인하기 위해 다시 재업로드 하자.

보통 데이터를 객체로 많이 전달한다. 그 객체를 연관 배열로 변환하여 사용하는 방법도 알아보자.

 

jsonRequest.php 파일을 수정하자. 읽어온 json 문자열 데이터를 연관 배열로 변환하여 다시 json으로 변환하여 사용하자. ( 보통 이렇게 많이 쓰인다. )

수정된 코드를 확인하기 위해 재 업로드 하자.

그리고 Main.js에서 받아온 json을 보여주자.

---

<복붙용 코드>

Main.js

import React, {Component} from 'react';
import {View, Text, Button, StyleSheet, ScrollView} from 'react-native';
 
export default class Main extends Component{
 
    constructor(){
        super();
        this.state={
            text:"",
            // movies 배열 저장 변수
            movies:[],
        };
    }
 
    render(){
        return(
            <View style={{flex:1, padding:16}}>
                <Button title="fetch data from network" onPress={this.fetchData2}></Button>
                <ScrollView style={styles.scroll}>
                    {/* Text에 보여줄 글씨는 바뀔 것이므로 state변수로 사용*/}
                    <Text style={styles.text}>{this.state.text}</Text> 
                    {/* movies 배열 데이터 보여주기 : ListView 작업 */}
                    {/* 배열의 map()메소드 이용해서 List형태 만들기 */}
                    {
                        this.state.movies.map((item, index)=>{
                            return <View key={index} style={{flexDirection:'row'}}>
                                        <Text> {item.id} </Text>
                                        <Text> {item.title} </Text>
                                        <Text> {item.releaseYear} </Text>
                                    </View>
                        })
                    }
                </ScrollView>
            </View>
        );
    }//render method ..
 
    // network 작업을 하는 메소드
    fetchData=()=>{
        // 1. Javascript에서 Http통신을 담당하는 XMLHttpRequest 객체 생성
        let request= new XMLHttpRequest();
 
        // 서버의 응답(response)을 받는 콜백메소드 지정 [ 반드시 send()보다 먼저 만들어져 있어야 함. 비동기 방식이라서.. ]
        // 서버로부터 응답을 받으면 자동으로 실행되는 메소드
        request.onreadystatechange= ()=>{
            // 서버의 응답이 올바른지 검사
            if(request.status==200 && request.readyState==4){ //200은 서버 응답 성공, 4는 응답이 끝났다.
                // 응답된 데이터 text컴포넌트에 보이기 위해
                // Text컴포넌트가 보여주는 this.state.text변수값을 변경
                this.setState({text:request.responseText});
            }
        };
 
        // 서버 주소 연결
        request.open('GET','http://umul.dothome.co.kr/index1.js');
        request.send();//요청보내기 (request)
    }// fetchData method..
 
    //위 XMLHttpRequest 를 좀더 편하게 사용하기 위한 라이브러리
    // Fetch 라이브러리 : Volley같은 녀석, ReactNative에 기본 내장되어 있음.
    fetchData2=()=>{
        // fetch()함수 사용- jquery ajax()와 비슷
        // 프로미스[promiss:약소] 문법- 비동기 처리에 많이 사용
        // .then()메소드 : 비동기 처리가 끝나면 실행되는 메소드
 
        //위의 메소드에서 open과 send가 fetch로 끝난것이다.
        // fetch('http://umul.dothome.co.kr/index1.js')
        // .then((response)=>{
        //     // 파라미터로 전달된 응답객체에게 결과 Data를 텍스트(string)로 변경해 달라고 요청
        //     return response.text(); //비동기 처리방식
        // }).then((responseText)=>{
        //     // 파라미터 responseText : 변환된 String 데이터
        //     this.setState({text:responseText});
        // });
 
        // fetch('http://umul.dothome.co.kr/test.txt')
        // .then(response=> response.text())
        // .then(responseText=>this.setState({text:responseText}))
        // .catch(error=>alert(error));
 
        // json데이터를 받는 것도 가능 [연습으로 facebook의 연습 Json데이터]
        // fetch('http://facebook.github.io/react-native/movies.json')
        // .then(response=>response.json())
        // .then(responseJson=>{
        //     // responeseJson : Json 객체임
        //     let title=responseJson.title;
        //     this.setState({text:title});
 
        //     this.setState({movies: responseJson.movies});
        // });
 
        // 서버에 데이터를 보내고 받는 작업 [GET, POST 방식]
        // let name="sam";
        // let msg= "Hello world";
        // fetch(`http://umul.dothome.co.kr/php/getMethod.php?name=${name}&msg=${msg}`)
        // .then(response=>response.text())
        // .then(responseText=>this.setState({text:responseText}))
        // .catch(error=>alert(error));
 
        // POST방식으로
        // let name="robin";
        // let msg= "Hello React Native";
        // fetch(`http://umul.dothome.co.kr/php/postMethod.php`,{
        //     method:'POST',
        //     headers:{"Content-Type": "application/x-www-form-urlencoded"},
        //     body: "name="+name+"&msg="+msg,
        // }).then(response=>response.text())
        // .then(responseText=>this.setState({text:responseText}))
        // .catch(error=>alert(error));
 
        // 서버와 데이터를 주고받을 때 일반 문자열보다는 json문자열을 선호함
        // 보낼 데이터가 객체로 되어 있는 경우가 더 많을 것임
        let dataObj= {name:"son", age:20, address:"seoul"};
 
        fetch('http://umul.dothome.co.kr/php/jsonRequest.php', {
            method: "POST",
            headers: {"Content-Type":"application/json"},//보낼 데이터가 json임을 알려주는 헤더 정보
            body: JSON.stringify(dataObj),//객체->JSON 문자열로 변환
        }).then(response=>response.json())
        .then(responseJson=>{
            let name = responseJson.name;
            let age= responseJson.age;
            let address= responseJson.address;
 
            this.setState({text:name+", "+age+", "+address})
            });
 
 
    }//fetchData2 method..
 
}//Main class..
 
const styles= StyleSheet.create({
    scroll:{marginTop:16, backgroundColor:'gray'},
    text:{padding:8, color:'white'}, 
});

getMethod.php

<?php
 
    header('Content-Type:text/plain; charset=utf-8');
 
    $name= $_GET['name'];
    $msg= $_GET['msg'];
 
    echo "NAME : $name \n";
    echo "MESSAGE : $msg \n";
 
 
?>

postMethod.php

<?php
 
    header('Content-Type:text/plain; charset=utf-8');
 
    $name= $_POST['name'];
    $msg= $_POST['msg'];
 
    echo "NAME : $name \n";
    echo "MESSAGE : $msg \n";
 
 
?>

jsonRequest.php

<?php
 
    header('Content-Type:application.json; charset=utf-8');
 
    // 슈퍼전역변수 $_POST배열에는 json문자열이 파싱되어 들어오지 못함.
    // 클라이언트로부터 받은 json body데이터를 읽어오기
    $jsonData= file_get_contents('php://input'); //파일 읽기 함수
    // echo $jsonData;
    // echo "\n\n";
 
    // 보통 json문자열을 받아 DB같은 곳에 저장하는 작업 수행
 
    // 이 예제에서는 간단하게 json문자열을 파싱해서 echo해주기
    $obj=json_decode($jsonData); //json문자열 --> 객체로 변환 (php의 함수)
    // echo "$obj->name \n";
    // echo "$obj->age \n";
    // echo "$obj->address \n\n";
 
    // 실제 현업에서는 서버가 echo하는 데이터도 json으로 주는 경우가 많음
    $arr=json_decode($jsonData, true); //json문자열 --> 연관배열로 변환
 
    // 연관배열을 json으로 변환
    $json=json_encode($arr);
    echo $json;
 
?>