REACT_Fetch Get

Get 호출하기 

 : 웹에서는 클라이언트와 서버가 http 프로토콜을 통해 요청과 응답을 주고받는다

http에서 사용하는 방식은 여러가지가 있지만 GET과  POST 를 가장 많이 사용한다

간단히 정리하자면 GET은 데이터를 조회해 가져와 사용하는 것이다

 

-GET :  http://example.com?a=1&b=2와와 같이 url? 뒤에 파라미터=값 형태로 필요한 데이터를 전달한다

주로 데이터 조회, 검색 등의 기능에 사용된다

 

-비동기 통신 : 먼저 시작한 작업의 완료 여부와 상관없이 다음 작업을 실행하는 것이다

 

---

- R059_FetchGet.js

import React, { Component } from 'react';

class R059_FetchGet extends Component {
    componentDidMount = async () => {
        const response =await fetch('http://date/jsontest.com/');
        const body = await response.json();
        alert(body.date)
    }

    render() {
        return (
            <h1>fetch get</h1>
        )
    }
}

export default R059_FetchGet;

 

 

- App.js

import React from 'react';
//import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import FetchGet from './R059_FetchGet'
//import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <FetchGet/>
    </div>
  );
}

export default App;

 

 

결과