[React Hook] axios / api 받아오기

 리액트 훅으로 api 받아오기 

 

npx create-react-app react-hook-axios

 

 

useEffect 임포트 해주기 

import './App.css';
import {useEffect} from 'react'; 

function App() {


  //리액트 오리지날 - componentDidMount 기능
  useEffect(
    () => {

    },[])
    //[name], ... 
    //useEffect - componentDidMount, componentDidUpdate, componentWillUnm ... 
  return (
    <div className="App">
      화면
    </div>
  );
}

export default App;

 

axios 써주기 

import './App.css';
import {useEffect} from 'react'; 

function App() {


  //리액트 오리지날 - componentDidMount 기능
  useEffect(
    () => {
      getMovies()
    },[])
    //[name], ... 
    //useEffect - componentDidMount, componentDidUpdate, componentWillUnm ... 
    
    const getMovies = async ()=> {
      const result = await axios.get('')
      console.log(result)
    }
  return (
    <div className="App">
      화면
    </div>
  );
}

export default App;

 

 

axios 다운로드해주고 임포트

npm install axios

 

import './App.css';
import {useEffect} from 'react'; 
import axios from 'axios'

function App() {


  //리액트 오리지날 - componentDidMount 기능
  useEffect(
    () => {
      getMovies()
    },[])
    //[name], ... 
    //useEffect - componentDidMount, componentDidUpdate, componentWillUnmount
    
    const getMovies = async ()=> {
      const result = await axios.get('https://yts.mx/api/v2/list_movies.json')
      console.log(result)
    }
  return (
    <div className="App">
      화면
    </div>
  );
}

export default App;

 

 

아직화면에는 출력안했지만 

데이터받기 완료