React_axios

npm install axios

 

 

App

import { useEffect, useState } from "react";

import { fetchUserList, insertUser } from "./http";      

import UsersList from "./components/UsersList"

import Error from "./components/Error";

import Box from "./components/Box";

/*

  1. npm install axios

  2. http.js 파일 수정

*/

export default function App(){

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

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

  const [error, setError] = useState();

  const [modalIsOpen, setModalIsOpen] = useState(false);

  const [user, setUser] = useState("");                   //삭제할 유저(ID값 저장)

  const [isEdit, setIsEdit] = useState(true);             //등록창

  const [input, setInput] = useState(                     //등록창 데이터

    {id: "", email: "", first_name: "", last_name: "", avatar: "https://reqres.in/img/faces/9-image.jpg"});                  

  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();

  }, []);

  function handleRemove(id){

    console.log("삭제할 ID: ", id);

    setUser(id);

    setModalIsOpen(true);

  }

  function handleRemoveConfirm(){

    setModalIsOpen(false);

    setUsersList((users) => {

      return users.filter((x) => x.id !== user);

    });

  }

  function handleAdd(){

    setIsEdit((isEdit) => !isEdit);

//    setIsEdit(isEdit ? false : true);

  }

  function handleChange(event){

    setInput({...input, [event.target.name] : event.target.value})

    const {name, value} = event.target;

    console.log(name, value, input);

  }

  function handleSubmit(){

    let xxx = insertUser(input);           //https에 구현

    console.log(xxx);

    setUsersList([...usersList, input]);   //실제 데이터 전송 및 프론트에서의 사용자 목록만 변경

    setIsEdit((isEdit) => !isEdit);

  }

  console.log("App 호출");

  return (

    <>

      {/* 모달창 부분 */}

      <Box open={modalIsOpen}>

        <h2>Are you sure?</h2>

        <p>삭제하시겠습니까?</p>

        <button onClick={() => setModalIsOpen(false)}>no</button>

        <button onClick={handleRemoveConfirm} className="button">yes</button>

      </Box>

     

      <hr></hr>

      <button onClick={handleAdd}>등록</button>

      {!isEdit && (

        <form onSubmit={handleSubmit}>

          아이디: <input name="id" value={input.id} onChange={handleChange}></input><br></br>

          이메일: <input name="email" value={input.email} onChange={handleChange}></input><br></br>

          성: <input name="first_name" value={input.first_name} onChange={handleChange}></input><br></br>

          이름: <input name="last_name" value={input.last_name} onChange={handleChange}></input><br></br>

          <button type="submit">저장</button>

        </form>

      )}

      <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"

          handleRemove = {handleRemove}  

          > </UsersList>

      )}

    </>

  )

}

 

http

import axios from "axios";                      //axios 추가

//******************* 수정 ***********************

export async function fetchUserList(){

    let resData;

    try{

        const response = await axios({

            method: "get",

            url: "https://reqres.in/api/users?page=2",

        });

        resData = await response.data.data;

    } catch(error){

        console.log(error);

        throw new Error("목록 로딩 시 에러 발생")

    }

    return resData;

}

//******************* 수정 ***********************

export async function insertUser(user){                //아이디 저장

    let resData;

    try {

        const response = await axios({

            method: "post",

            url: "https://reqres.in/api/users",

            body: JSON.stringify(user),

            headers: {

                "Content-type": "application/json",

            },

        });

        resData = response.data.data;

    } catch (error) {

        console.log("insertUser.Error");

        throw new Error("회원 추가시 에러 발생");

    }

    return resData;

}