리액트네이티브 Data 가져오기, React Native Fetching Data Fom An API

fetch API

fetch API는 Ajax를 비동기형태로 쉽게 사용할 수 있는 api 함수이다. 

fetch API 관련된 내용은 해당링크를 참조하자

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
   })
  .catch(function(err) {
     console.log(err);
   });

URL을 인자로 받고 응답을 처리하기위한 Promise인 response 객체가 반환된다. 

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, ActivityIndicator} from 'react-native';
 
export default class App extends Component {
 
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: null
    }
  }
 
  componentDidMount() {
    return fetch('https://facebook.github.io/react-native/movies.json')
            .then ( (response) => response.json() )
            .then( (responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson.movies,
                })
            })
        .catch((error) => {
            console.log(error)
        });
  }
 
  render() {
      if (this.state.isLoading) {
        return (
            <View style={styles.container}>
                <ActivityIndicator />
            </View>
        )
    } else {
        let movies = this.state.dataSource.map((val, key) => {
            return <View key={key} style={styles.item}><Text>{val.title}</Text></View>
        });
        return (
            <View style={styles.container}>
                
                {movies}
            </View>
        );
    }
  }
}
 
const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
  },
  item: {
      flex: 1,
      alignSelf: 'stretch',
      margin: 10,
      alignItems: 'center',
      justifyContent: 'center',
      borderBottomWidth: 1,
      borderBottomColor: '#eee'
  }
});
 

[App.js]

map 함수 참고

원문 출처 : https://www.youtube.com/watch?v=hzLDsxPGctY

fetch api : https://blog.naver.com/dmswjd93/221273203218

https://medium.com/@kkak10/javascript-fetch-api-e26bfeaad9b6