REACT

REACT_AxiosGet

ssmm95 2024. 9. 24. 14:56

axios 

:  axios 도 fetch와 마찬가지로 비동기 통신을 지원한다

 axios는 fetch와 달리 , 별도로 설치한 후 import해서 사용해야한다


C:\Users\학생>cd..

C:\Users>cd..

C:\>cd REACT 14

C:\REACT 14>cd client

C:\REACT 14\client>npm install -save axios

 

설치가 끝나면 

C:\REACT 14\client>npm start

axious설치후 npm start


- R061_AxiosGet.js

import React, { Component } from 'react';
import axios from "axios";

class R061_AxiosGet extends Component {
    componentDidMount() {
        axios.get('http://date.jsontest.com/')
        .then( reponse => {alert(reponse.data.date)})
    }

    render() {
        return (
            <h1>Axios Get</h1>
        )
    }
}

export default R061_AxiosGet;

 

 

- App.js

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

import AxiosGet from './R061_AxiosGet'
//import 'bootstrap/dist/css/bootstrap.css'

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

export default App;

 

 

결과

'REACT' 카테고리의 다른 글

REACT_Callback  (0) 2024.09.24
REACT_AxiosPost  (0) 2024.09.24
REACT_Fetch Post  (1) 2024.09.24
REACT_Fetch Get  (0) 2024.09.24
REACT_Sweetalert2 Confirm  (1) 2024.09.24