예외처리

가. 예외처리용 컴포넌트 작성

    ==> 예외발생시 랜더링됨

   export  function ResponseError( ){

     return (

         //예외메세지

  );

}

 

import logo from './logo.svg';

import './App.css';

import {useEffect, useState } from 'react';

import UserList from './components/UserList';

import { fetchUserList } from './http/HttpService';

import ResponeError from './components/ResponseError';

function App() {

  const [userList, SetUserList] = useState([]);

  const [error, SetError] = useState(null);

  //서버에서 한번만 땡겨오면 됌, 단 한번만 실행은 빈배열 => []

  useEffect(()=>{

    var req = async function() {      

   

      try{

        var userList = await fetchUserList(2);

        SetUserList(userList);

      }catch(err){

        console.log("App.fetchUserList", err);

        SetError({message:"fetchUserList 에러발생"});

      }

    };

    req();

  }, []);

  return (

    <div className="App">

     { error && <ResponeError message={error}/> }

     { !error && <UserList userList={userList}/> }

    </div>

  );

}

export default App;

 

 

 

export async function fetchUserList(n){

    var url = `https://reqres.in/api/users?page=${n}`;

    var response = await fetch(url, {

        method: 'PUT'

    });

    if(!response.ok){

        console.log("fetchUserList Error 발생");

        throw new Error("fetchUserList Error 발생");

    }

    //예외가 발생되면 에러가 호출한 곳(fetchUserList)으로 넘어감

    //호출한곳에서 try catch 하면됨

    var json = await response.json();

    var userList = json.data;

    return userList;

}

export async function fetchUserUpdate(){

}

export async function fetchUserSave(){

}

 

 

 

function ResponeError({message}){

    return(

        <>

            <h2>에러 페이지</h2>

            {message.message}

        </>

    );

}

export default ResponeError;