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 |