RN) 네트워크 중 패치

소정·2023년 6월 5일

ReactNative

목록 보기

15/17

[1] 자바스크립이 제공하는 XMLHttpRequest 사용해 통신하기

🔨 사용방법

네크워크작업 객체 생성 : XMLHttpRequest (안드는 : httpRequst)

서버 응답결과 받을 때 반응하는 콜백메소드 등록 - 이 작업은 반드시 send 하기 전에 쓰는 걸 권장 : onreadystatechange

무지개 로드(스트림) 열기 : .open()

보내기 : .send()

import React, { useState } from "react";
import { View, Text, Button, StyleSheet, ScrollView, Alert } from "react-native";


export default function main():JSX.Element {

    const [message , setMessage] = useState('message....')


    const fetchData = () => {
        console.log('fetch start')

        // 1. 자바스크립트의 네크워크작업 객체 : XMLHttpRequest (안드는 : httpRequst)
        //1.1) 네크워크작업 객체 생성
        const Xhr = new XMLHttpRequest()

        //1.2) 서버 응답결과 받을 때 반응하는 콜백메소드 등록 - 이 작업은 반드시 send 하기 전에 쓰는 걸 권장
        Xhr.onreadystatechange = () => {
            // 서버의 응답은 여러개 올 수 있음
            // 4번은 잘 끝났다라는 뜻
            if( Xhr.readyState == 4 && Xhr.status == 200) {
                Alert.alert('응답 완료')
                setMessage( Xhr.responseText )
            }
            
        }

        //1.3) 무지개 로드(스트림) 열기
        Xhr.open('GET','http://mrhisj23.dothome.co.kr/', true) 
        //1.4) 보내기
        Xhr.send()
        
    }

    return(

        <View style={style.root}>
            <Button title="fetch data from network" onPress={fetchData}></Button>

            <ScrollView style={style.container}>

                <Text style={style.text}> {message} </Text>

            </ScrollView>
        </View>

    )

}

const style = StyleSheet.create({

    root: {
        flex : 1,
        padding : 16,
    },
    container : {
        marginTop : 16,
    },
    text : {
        padding : 8,
        color : 'black',
    }
})

[2] fetch 라이브러리 사용하기

import React, { useState } from "react";
import { View, Text, Button, StyleSheet, ScrollView, Alert } from "react-native";


export default function main():JSX.Element {

    const [message , setMessage] = useState('message....')

    //영화 정보 1개의 타입
    type movieInfo = {
        id :string,
        title : string,
        releaseYear : string
    }

    //3. 페이스북팀(RN) 개발자 사이트의 movies.json 파일 객체 정보
    type MoviesResponse = {
        title:string,
        description : string,
        movies : movieInfo[]
    }
    const [moviesResponse, setMoviesResponse] = useState<MoviesResponse>({title:"", description:"", movies: []})


    const fetchData = () => {


        // 2. fetch() 함수 - JS에 기본 내장된 네트워크 통신 라이브러리
        //promiss문법 .then() 메소드
        fetch('http://mrhisj23.dothome.co.kr/index.js')
            .then((response:Response) => Alert.alert(response.status.toString())) // 결과 200 이면 ok
        
        //응답 결과를 글씨(text)로 받아보기
        fetch('http://mrhisj23.dothome.co.kr/index.js')
            .then((respose:Response) => {
                //응답 객체에게 응답 결과를 글씨로 바꿔 달라고 요청 - 비동기 작업임
                return respose.text() //또 then 으로 하면 지저분하서 return으로 받음
            }).then((text : string) => { //위에서 리턴 받은 값
                setMessage(text)
            }).catch((error)=>{ //위 작업 중 하나에서 에러 발생하면 실행되는 영역
                Alert.alert(error)
            })

        
        //위 then() 메소드의 파라미터 화살표 축약표현
        fetch('http://mrhisj23.dothome.co.kr/')
            .then(response => response.text())
            .then(text => setMessage(text))


     

    }

    return(

        <View style={style.root}>
            <Button title="fetch data from network" onPress={fetchData}></Button>

            <ScrollView style={style.container}>

                <Text style={style.text}> {message} </Text>

            </ScrollView>

            {/* 영화 정보 리스트 */}
            <View style={{flex :1, marginTop:16}}>
                <Text style={{color:'black', fontWeight:"bold", padding: 8}}>{moviesResponse.title}</Text>
                {/* 영화 movies는 여러개.. FlatList 컴포넌트 사용해야하지만... */}
                {
                    moviesResponse.movies.map( (movie : movieInfo, index) => {
                        return (
                            <View style={style.item} key={index}>
                                <Text>{movie.id}</Text>
                                <Text>{movie.title}</Text>
                                <Text>{movie.releaseYear}</Text>
                            </View>
                        )
                    } )
                }

            </View>

        </View>

    )

}

const style = StyleSheet.create({

    root: {
        flex : 1,
        padding : 16,
    },
    container : {
        marginTop : 16,
    },
    text : {
        padding : 8,
        color : 'black',
    },
    item : {
        borderWidth : 1,
        borderRadius : 3,
        padding : 8,
        margin : 2,
    }
})

[3] OPEN API 파싱

1. 우선 페이스북에서 샘플로 제공하는 json 파싱 실습

1.1) 우선 텍스트로 보여주기

import React, { useState } from "react";
import { View, Text, Button, StyleSheet, ScrollView, Alert } from "react-native";


export default function main():JSX.Element {

    const [message , setMessage] = useState('message....')


    const fetchData = () => {
        console.log('fetch start')       

        // 3. OPEN API - JSON 파싱
        // 3.1) 우선 페이스북에서 샘플로 제공하는 json 파싱 실습
        fetch('https://reactnative.dev/movies.json')
            .then(res => res.text())
            .then(text => setMessage(text))

    }

    return(

        <View style={style.root}>
            <Button title="fetch data from network" onPress={fetchData}></Button>

            <ScrollView style={style.container}>

                <Text style={style.text}> {message} </Text>

            </ScrollView>
        </View>

    )

}

const style = StyleSheet.create({

    root: {
        flex : 1,
        padding : 16,
    },
    container : {
        marginTop : 16,
    },
    text : {
        padding : 8,
        color : 'black',
    }
})

1.2) 분석하기

json 파싱하기

import React, { useState } from "react";
import { View, Text, Button, StyleSheet, ScrollView, Alert } from "react-native";


export default function main():JSX.Element {

    const [message , setMessage] = useState('message....')

    //영화 정보 1개의 타입
    type movieInfo = {
        id :string,
        title : string,
        releaseYear : string
    }

    //3. 페이스북팀(RN) 개발자 사이트의 movies.json 파일 객체 정보
    type MoviesResponse = {
        title:string,
        description : string,
        movies : movieInfo[]
    }
    const [moviesResponse, setMoviesResponse] = useState<MoviesResponse>({title:"", description:"", movies: []})


    const fetchData = () => {
      //////////////////////////////////////////////////    
        // 3. OPEN API - JSON 파싱
        // 3.1) 우선 페이스북에서 샘플로 제공하는 json 파싱 실습
        // fetch('https://reactnative.dev/movies.json')
        //     .then(res => res.text())
        //     .then(text => setMessage(text))

        // 3.2) json 파싱 
        fetch('https://reactnative.dev/movies.json')
            .then(res => res.json())
            .then(obj => setMoviesResponse(obj) )


        // Http request mrthod 코드 

        //서버에 보낼 데이터
        let name = "dam"
        let message = "ok"

        // 1. get 방식
        fetch(`http://mrhisj23.dothome.co.kr/get_aaa.php?name=${name}&message=${message}`)
            .then(res => res.text())
            .then(text => setMessage(text))

        // 2. post 방식
        fetch(`http://mrhisj23.dothome.co.kr/post_bbb.php`, {
            method : 'POST',
            headers : {'content-type':'application/x-www-form-urlecoded'},
            body : `name=${name}&message=${message}`,
        }).then(res => res.text()).then(text => setMessage(text))


        // 3. POST로 보낼 데이터가 객체일때는 그냥 json 문자열로 변환하여 서버로 보냄
        let person = {name : "dam", age : 20}

        fetch(`http://mrhisj23.dothome.co.kr/post_bbb.php`, {
            method : 'POST',
            headers : {'content-type':'application/json'}, // 꼭! json 이라고 명시
            body : JSON.stringify(person) //오브젝트를 json 문자열로 바꿈 -> 단 이걸 쓰려면 헤더스 꼭 json 이라 써줘야함
        }).then(res => res.json).then(obj => Alert.alert('제이슨 파싱 객체 받음' + obj))

    }

    return(

        <View style={style.root}>
            <Button title="fetch data from network" onPress={fetchData}></Button>

            <ScrollView style={style.container}>

                <Text style={style.text}> {message} </Text>

            </ScrollView>

            {/* 영화 정보 리스트 */}
            <View style={{flex :1, marginTop:16}}>
                <Text style={{color:'black', fontWeight:"bold", padding: 8}}>{moviesResponse.title}</Text>
                {/* 영화 movies는 여러개.. FlatList 컴포넌트 사용해야하지만... */}
                {
                    moviesResponse.movies.map( (movie : movieInfo, index) => {
                        return (
                            <View style={style.item} key={index}>
                                <Text>{movie.id}</Text>
                                <Text>{movie.title}</Text>
                                <Text>{movie.releaseYear}</Text>
                            </View>
                        )
                    } )
                }

            </View>

        </View>

    )

}

const style = StyleSheet.create({

    root: {
        flex : 1,
        padding : 16,
    },
    container : {
        marginTop : 16,
    },
    text : {
        padding : 8,
        color : 'black',
    },
    item : {
        borderWidth : 1,
        borderRadius : 3,
        padding : 8,
        margin : 2,
    }
})

소정

보조기억장치

이전 포스트

RN) 웹뷰

다음 포스트

RN) 네트워크 중 패치

ReactNative

[1] 자바스크립이 제공하는 XMLHttpRequest 사용해 통신하기

🔨 사용방법

[2] fetch 라이브러리 사용하기

[3] OPEN API 파싱

1. 우선 페이스북에서 샘플로 제공하는 json 파싱 실습

1.1) 우선 텍스트로 보여주기

1.2) 분석하기

RN) 웹뷰

RN) 토이플젝_영화앱_1

0개의 댓글