react-native ; api를 통한 get data 를 console.log 에 찍어서 확인하기

< react-native ; api를 통한 get data 를 console.log 에 찍어서 확인하기 >

* 디바이스 개발자 모드 켜기 : device에서 'remote JS Debugging' 활성화 

  --> Press Ctrl⇧J to open Developer Tools (ctrl+shift+J 클릭)

  --> 크롬 브라우져에서 개발자 모드(console) 창이 열림.

* 파일 기본구조

 - 프로젝트 root : App.js

 - root-src : data_get_api.js

* data_get_api.js

const url = "https://~~~.org/~~~/~~~?country=us&apiKey=_your_api_key_here_"

export async function getData(){

let result = await fetch(url).then(response => response.json());

return result.articles;

}

* App.js

import React from 'react';

import { View, Text } from 'react-native';

import { getData } from './src/data_get_api'

export default class App extends React.Component {

constructor(props) {

super(props);

this.state = { data_get: ['test_initial_data'] };

}

fetchNews = () => {

getData().then(response => this.setState({ data_get: response }))

}

componentDidMount() {

this.fetchNews();

}

render() {

console.log('test_log_of_get_data_by_api')

console.log(this.state.data_get)

return (

<View>

<Text>111</Text>

<Text>222</Text>

<Text>Open up App.js to start working on your app!</Text>

</View>

);

}

}

* code save --> 디바이스 view 와 크롬 콘솔창 로그 확인