axios, router

2024. 3. 24. 16:01ㆍDaily Codig Reminder

사용자추가1

import {useEffect, useState} from "react";
import {fetchUserList} from "./http.js"
import UsersList from './components/UsersList'
import Error from './components/Error';
import Box from "./components/Box.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



useEffect (()=>{
  async function xxx(){ //가져오는 중
    //비동기함수 구현
    setIsFetching(true); 
    try{
const usersList = await fetchUserList();
setUsersList(usersList);
    }catch(err){
console.log("catch    Error: " , err.message);
setError({message: err.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);
});

}

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>
    {/*모달창 부분*/}
    <h1>User 목록</h1>
    {error && (
      <Error title="User 목록 : 예외발생됨" message={error.message}></Error>
    )}
    {!error && (
      <UsersList 
      isLoading = {isFetching}
      users ={usersList}
      loadingText="Fetching your users..."
      fallbackText ="No Users available"
      handleRemove={handleRemove}
></UsersList>
      )}
    </>
  );
}

 

 

import React from 'react';
import {useEffect, useRef} from "react";
function Box({open, children}) {
    const dialog = useRef();
    useEffect (()=> {
        if(open){
            dialog.current.showModal();
        }else{
            dialog.current.close();
        }
    }, [open]);
    return (
        <div>
            <dialog ref={dialog} >{open ? children : null}</dialog>
        </div>
    );
}

export default Box;

 

 

import React from "react";

function UsersList({ users, isLoading, loadingText, fallbackText, handleRemove }) {
  console.log("users:", users);
  console.log("isLoading:", isLoading);
  console.log("loadingText:", loadingText);
  console.log("fallbackText:", fallbackText);

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

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

      {!isLoading && users.length > 0 && (
        <table border="1">
          <thead>
            <tr>
              <th>아이디</th>
              <th>이름</th>
              <th>사진</th>
              <th>삭제</th>
            </tr>
          </thead>
          <tbody>
            {users.map((user, idx) => (
              <tr key={idx}>
                <td>{user.id}</td>
                <td>{user.first_name}</td>
                <td>
                  <img src={user.avatar} width="50" height="50" alt={`Avatar of ${user.first_name}`} />
                </td>
                <td>
                <button onClick={() => handleRemove(user.id)}>del</button> {/* 삭제 버튼 */}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </>
  );
}

export default UsersList;

 

 

 

 

import {useEffect, useState} from "react";
import {fetchUserList, insertUser} from "./http.js"
import UsersList from './components/UsersList'
import Error from './components/Error';
import Box from "./components/Box.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 [inputs, setInputs] = 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(err){
console.log("catch    Error: " , err.message);
setError({message: err.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 handleSubmit(){
  let xxx = insertUser(inputs); //.https 에 구현 추가 및 응답데이터
    console.log(">>>>>>",xxx); //응답데이터
    setUsersList([...usersList, inputs])
    //실제 데이터 전송 및 프론트 에서의 사용자 목록만 변경함
    setIsEdit((isEdit) => !isEdit);

  }
function handleAdd(){
  setIsEdit(!isEdit);
}
function handelChange (e){
  const {name, value} = e.target;
  setInputs({...inputs, [name]:value});
  console.log()
}

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/>
   {/* 등록 버튼 */}
   <button onClick={handleAdd}>등록</button>
      {/* 입력 폼 */}
      {isEdit && (
        <form onSubmit={handleSubmit}>
         
            <input
    type="text"
    name="id"
    placeholder="ID"
    value={inputs.id}
    onChange={handelChange}
  /><br/>
  <input
    type="email"
    name="email"
    placeholder="Email"
    value={inputs.email}
    onChange={handelChange}
  /><br/>
  <input
    type="text"
    name="first_name"
    placeholder="First Name"
    value={inputs.first_name}
    onChange={handelChange}
  /><br/>
  <input
    type="text"
    name="last_name"
    placeholder="Last Name"
    value={inputs.last_name}
    onChange={handelChange}
  /><br/>
  <input type="submit" value="저장"></input>
        </form>
 )}
    {/*모달창 부분*/}
    <h1>User 목록</h1>
    {error && (
      <Error title="User 목록 : 예외발생됨" message={error.message}></Error>
    )}
    {!error && (
      <UsersList 
      isLoading = {isFetching}
      users ={usersList}
      loadingText="Fetching your users..."
      fallbackText ="No Users available"
      handleRemove={handleRemove}
></UsersList>
      )}
    </>
  );
}

 

 

import React from "react";

function UsersList({ users, isLoading, loadingText, fallbackText, handleRemove }) {
  console.log("users:", users);
  console.log("isLoading:", isLoading);
  console.log("loadingText:", loadingText);
  console.log("fallbackText:", fallbackText);

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

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

      {!isLoading && users.length > 0 && (
        <table border="1">
          <thead>
            <tr>
              <th>아이디</th>
              <th>이름</th>
              <th>사진</th>
              <th>삭제</th>
            </tr>
          </thead>
          <tbody>
            {users.map((user, idx) => (
              <tr key={idx}>
                <td>{user.id}</td>
                <td>{user.first_name}</td>
                <td>
                  <img src={user.avatar} width="50" height="50" alt={`Avatar of ${user.first_name}`} />
                </td>
                <td>
                <button onClick={() => handleRemove(user.id)}>del</button> {/* 삭제 버튼 */}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </>
  );
}

export default UsersList;

 

 

export async function fetchUserList(){
//데이터 요청 응답 수신
    const response = await fetch("https://reqres.in/api/users?page=2", {
        //method:"GET" //정상요청
        method:"GET" //정상요청
        //에러 실습은 PUT 으로 변경해서 테스트 할것
    });


    if (!response.ok){
        console.log("FetchUserList.Error");
        throw new Error ("UserList 요청 예외");

    }
    

    //fetch 비동기 요청 :promise 객체 리턴 => awit 처리
//await 사용 함수는 전체를 async 처리 해주어야함
    const resData = await response.json();
    console.log("resData: ",resData, response.ok);
    return resData.data;
}
export async function insertUser(user){
    const response = await fetch("https://reqres.in/api/users",{
        method: "POST",
        body: JSON.stringify(user),
        headers: {
            "Content-type" : "application/json",
        }
    })
}

사용자추가2_axios추가

 

import {useEffect, useState} from "react";
import {fetchUserList, insertUser} from "./http.js"
import UsersList from './components/UsersList'
import Error from './components/Error';
import Box from "./components/Box.js";
import axios from "axios";
/*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 [inputs, setInputs] = 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(err){
console.log("catch    Error: " , err.message);
setError({message: err.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 handleSubmit(){
  let xxx = insertUser(inputs); //.https 에 구현 추가 및 응답데이터
    console.log(">>>>>>",xxx); //응답데이터
    setUsersList([...usersList, inputs])
    //실제 데이터 전송 및 프론트 에서의 사용자 목록만 변경함
    setIsEdit((isEdit) => !isEdit);

  }
function handleAdd(){
  setIsEdit(!isEdit);
}
function handelChange (e){
  const {name, value} = e.target;
  setInputs({...inputs, [name]:value});
  console.log()
}

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/>
   {/* 등록 버튼 */}
   <button onClick={handleAdd}>등록</button>
      {/* 입력 폼 */}
      {isEdit && (
        <form onSubmit={handleSubmit}>
         
            <input
    type="text"
    name="id"
    placeholder="ID"
    value={inputs.id}
    onChange={handelChange}
  /><br/>
  <input
    type="email"
    name="email"
    placeholder="Email"
    value={inputs.email}
    onChange={handelChange}
  /><br/>
  <input
    type="text"
    name="first_name"
    placeholder="First Name"
    value={inputs.first_name}
    onChange={handelChange}
  /><br/>
  <input
    type="text"
    name="last_name"
    placeholder="Last Name"
    value={inputs.last_name}
    onChange={handelChange}
  /><br/>
  <input type="submit" value="저장"></input>
        </form>
 )}
    {/*모달창 부분*/}
    <h1>User 목록</h1>
    {error && (
      <Error title="User 목록 : 예외발생됨" message={error.message}></Error>
    )}
    {!error && (
      <UsersList 
      isLoading = {isFetching}
      users ={usersList}
      loadingText="Fetching your users..."
      fallbackText ="No Users available"
      handleRemove={handleRemove}
></UsersList>
      )}
    </>
  );
}

 

 

import axios from "axios";

export async function fetchUserList(){
    let resData;
    try{ 
//데이터 요청 응답 수신
    const response = await axios({
        url: "https://reqres.in/api/users?page=2",
        //method:"GET" //정상요청
        method:"GET" //정상요청
        //에러 실습은 PUT 으로 변경해서 테스트 할것
    });
    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",
            body: JSON.stringify(user),
            headers: {
                "Content-type" : "application/json",
            },
            url:"https://reqres.in/api/users"
        })
        resData = response.data.data;

    }catch(error){
        console.log(error);
        throw new Error ("회원 추가시 에러 발생");
    }
    return resData;
}

 

 

 

 

axios추가2

 

import axios from "axios";

export async function fetchUserList(){
    let resData;
//     try{ 
// //데이터 요청 응답 수신
//     const response = await axios({
//         url: "https://reqres.in/api/users?page=2",
//         //method:"GET" //정상요청
//         method:"GET" //정상요청
//         //에러 실습은 PUT 으로 변경해서 테스트 할것
//     });
//     resData = await response.data.data;

//     }catch(error){
//         console.log(error);
//         throw new Error(" 목록 로딩시 발생");
//     }
//1.
// await axios({
//     method: "get",
//     url: "https://reqres.in/api/users?page=2",
// }).then(
//     (res) => {
//         console.log(">>>>>>",res);
//         resData= res.data.data;
//     }
// ).catch(
//     (error) => {
//         console.log(error);
//         throw new Error("목록 로딩시 발생")
//     }
// )
//2.
await axios.get(
   
    "https://reqres.in/api/users?page=2"
).then(
    (res) => {
        console.log(">>>>>>",res);
        resData= res.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",
            body: JSON.stringify(user),
            headers: {
                "Content-type" : "application/json",
            },
            url:"https://reqres.in/api/users"
        })
        resData = response.data.data;

    }catch(error){
        console.log(error);
        throw new Error ("회원 추가시 에러 발생");
    }
    return resData;
}

 

router

import React from 'react';
import Home from './pages/Home'
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
const router = createBrowserRouter([
  { path: "/", element: <Home/>}
]
);
function App(props) {
  return <RouterProvider router={router}/>
}

export default App;

 

 

Routing02_Products추가및Link연결

 

import React from 'react';
import Home from './pages/Home'
import Products from './pages/Products'
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
const router = createBrowserRouter([
  { path: "/", element: <Home/>},
  {path: "/products", element: <Products/>}
]
);
function App(props) {
  return <RouterProvider router={router}/>
}

export default App;

 

 

import React from 'react';
import { Link } from 'react-router-dom';
function Home(props) {
    return (
        <div>
             <h1>My Home Page</h1>
             Go to <Link to="/products"> the list of products</Link>
        </div>
    );
}

export default Home;

 

 

import React from 'react';

function Products(props) {
    return (
        <div>
            <h1>The Products Page</h1>
        </div>
    );
}

export default Products;<h1>The Products Page</h1>

 

Routing03_menu역할의RootLayout작성

import React from 'react';
import Home from './pages/Home'
import Products from './pages/Products'
import Root from './pages/Root';

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  { 
    path: "/", 
    element: <Root/>,
children : [
  {path: "/" ,element: <Home/>},
  {path: "/products", element: <Products/>}
]

},

]);
function App(props) {
  return (
  <>
   <RouterProvider router={router}/>
  </>
  )
}

export default App;

 

 

import React from 'react';
import { Outlet } from 'react-router-dom';
import MainNavigation from '../components/MainNavigation'
function Root(props) {
    return (
        <div>
            <MainNavigation/>
            <hr/>
            <Outlet/>
        </div>
    );
}

export default Root;
import React from 'react';
import { Link } from 'react-router-dom';
function MainNavigation(props) {
    return (
        <div>
            <Link to="/" >Home</Link>
            <br/>
            <Link to="/products">products</Link>
        </div>
    );
}

export default MainNavigation;

 

 

router2

예외처리

 

import React from 'react';
import Home from './pages/Home'
import Products from './pages/Products'
import Root from './pages/Root';
import Error from './pages/Error';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  { 
    path: "/", 
    element: <Root/>,
    errorElement: <Error/>, ///////////////// 추가
children : [
  {path: "/" ,element: <Home/>},
  {path: "/products", element: <Products/>}
]

},

]);
function App(props) {
  return (
  <>
   <RouterProvider router={router}/>
  </>
  )
}

export default App;

 

 

import React from 'react';
import MainNavigation from '../components/MainNavigation';
function Error(props) {
    return (
        <div>
              <MainNavigation/>
              <hr/>
            <h1>An error occured!!!</h1>
            Could not find this page!!
        </div>
    );
}
export default Error;

'Daily Codig Reminder' 카테고리의 다른 글

css, routing, form  (0) 2024.03.24
Routing_loader  (0) 2024.03.24
useEffect , memo  (0) 2024.03.19
useRef  (0) 2024.03.19
useState 와 useRef  (0) 2024.03.19

관련글

티스토리툴바