React_Error 처리

http

export async function fetchUserList(){

    //데이터 요청 응답 수신

    const response = await fetch("https://reqres.in/api/users?page=2", {

        //method: "GET"     //정상요청

        method: "PUT"   //에러 출력을 위한 put 사용

    });

    //비동기 요청: promise 객체 리턴 => await 처리

    //await 사용함수는 전체를 async 처리해주어야 함

    if(!response.ok){

        console.log("fetchUserList.Error");

        throw new Error("UsersList 요청 예외");

    }

    const resData = await response.json();

    return resData.data;

}

 

error

//에러가 출력될 때 나오는 방식

export default function Error({title, message}){

    return (

        <>

            <div>

                <h2>{title}</h2>

                <p>{message}</p>

            </div>

        </>

    )

}

 

App

import { useEffect, useState } from "react";

import { fetchUserList } from "./http";

import UsersList from "./components/UsersList"

import Error from "./components/Error";

export default function App(){

  const [usersList, setUsersList] = useState([]);

  const [isFetching, setIsFetching] = useState(false);

  const [error, setError] = useState();

  useEffect(() => {

    async function xxx(){

      setIsFetching(true);                         //가져오는 중

      //비동기함수의 구현

      try {

        const usersList = await fetchUserList();

        setUsersList(usersList);

      } catch (error) {                           //가져오는 도중 에러 발생 시

        console.log("Error: ", error.message);

        setError({messsage: error.message});      //에러에 메세지 저장

      }

      setIsFetching(false);                       //가져오기 완료

    }

    xxx();

  }, []);

  console.log("App 호출");

  return (

    <>

      <h1>User 목록</h1>

      {/* 에러가 발생할 경우: 에러 제목과 에러 메세지 전송 */}

      {error && (  <Error title="User목록: 예외발생됨" messsage={error.message}></Error>

      )}

      {/* 에러가 발생하지 않을 경우: 로딩중 여부, 유저 데이터, 로딩중 메세지, 유저 없음 메세지 전송 */}

      {!error &&(  <UsersList

          isLoading={isFetching}

          users = {usersList}

          loadingText="Fetching your users..."

          fallbackText="No users available"></UsersList>

      )}

    </>

  )

}

 

UsersList

 

export default function UsersList({ users, isLoading, loadingText, fallbackText }) {

    return (

      <>

        {/* 로딩 중일 때:  loadingText가 붉은 색으로 출력*/}

        {isLoading && <p style={{color: "red"}}>{loadingText}</p>}  

        {/* 로딩 중이 아닐 때: 유저가 없을 때는 fallbackText이 파랑 색으로 출력 */}                                                                    

        {!isLoading && users.length === 0 && (<p style={{color: "blue"}}>{fallbackText}</p>)}

        {/* 로딩 중이 아닐 때: 유저가 있을 때는 table 형태로 유저 데이터 출력 */}

        {!isLoading && users.length > 0 && (

            <table border={1}>

            <thead>

                <tr>

                    <td>아이디</td>

                    <td>이름</td>

                    <td>사진</td>

                </tr>

            </thead>

            <tbody>

                {users.map((user, idx) => {

                    return (

                        <tr key={idx}>

                            <td>{user.id}</td>

                            <td>{user.first_name}</td>

                            <td><img src={user.avatar} width="50" height= "50"></img></td>

                        </tr>

                    )

                })}

            </tbody>

          </table>

        )}

      </>

    );

  }