본문 바로가기

프론트엔드 공부/react

axios로 외부 api, data.json 불러오기 + 로딩소스 추가

const Page1 = ({history, props}) => {

  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(()=>{
    axios("https://fangmin26.github.io/data/personal.json")
    .then((res)=>{
      setData(res.data)
    })
    .catch((err)=>{
      console.error("fetch error",err);
      setError(err)
    })
    .finally(()=>{
    //setLoading(false)
      setTimeout(function(){
        setLoading(false);
      },3000)
      
    })
  },[])

  if(error) return "error";
  if(loading) return <Loading/>;
  
  return (