axios 활용하여 JSON.stringify로 데이터 가져오기

import React ,{useState, useEffect} from 'react';
import axios from 'axios';

export default function App(){
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(()=>{
    axios("https://randomuser.me/api")
    .then((res)=>{
      setData(res.data)
    })
    .catch((err)=>{
      console.error("fetch error",err);
      setError(err)
    })
    .finally(()=>{
      setLoading(false);
    })
  },[])

  if(error) return "error";
  if(loading) return "loading";
  return(
    <>
    <img src={data.results[0].picture.large} alt="large"/>
    <pre>
      {JSON.stringify(data,null,2)}  
    </pre>
    <a href={data.items[0].selfLink}>법륜스님 책</a>
    </>
  )
}

3초동안 로딩진행후 json 가져오고 싶을때 하단처럼 변경하면 된다 ! 

    .finally(()=>{
      setTimeout(function(){setLoading(false)},3000)
      //  setLoading(false)
    })
  },[])