반응형
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);
const [modalIsOpen, SetModalIsOpen] = useState(false);
const [dele, SetDele] = 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();
}, []);
//삭제 확인 - 모달창 이용해서 확인
// del_id는 파라미터 자리에 있어도 그냥 우리가 이름 지어주는듯
function handleRemove(del_id){
console.log("App.handleRemove", del_id);
SetModalIsOpen(modalIsOpen => !modalIsOpen);
SetDele(del_id);
}
// 삭제 기능
// 배열?에서 삭제할때는 삭제할려는 걸 뺀 나머지를 불러온다
// 불변객체(새로운 배열)을 받아야함
function handleRemoveConfirm(){
console.log("App.handleRemoveConfirm");
SetModalIsOpen(false);
var new_userList = userList.filter((row,idx)=>row.id !== dele);
SetUserList(new_userList);
}
return (
<div className="App">
{/* 모달창 */}
<dialog open={modalIsOpen}>
<p>진짜로 삭제할까요</p>
<button onClick={()=>SetModalIsOpen(modalIsOpen => !modalIsOpen)}>cancle</button>
<button onClick={handleRemoveConfirm}>ok</button>
</dialog>
<h2>userList 목록</h2>
{ error && <ResponeError message={error}/> }
{ !error && <UserList userList={userList} onRemove={handleRemove}/> }
</div>
);
}
export default App;
function UserList({userList, onRemove}) {
//삭제
function handleRemove(id){
console.log("UserList.handleRemove");
onRemove(id);
}
return (
<div className="UserList">
<table border="1">
<thead>
<th>id</th>
<th>email</th>
<th>first_name</th>
<th>avatar</th>
<th>삭제</th>
</thead>
{
userList.map((row, idx) =>
<tbody key={idx}>
<td>{row.id}</td>
<td>{row.email}</td>
<td>{row.first_name}</td>
<td><img src={row.avatar} /></td>
<td><button onClick={()=>handleRemove(row.id)}>삭제</button></td>
{/* 이벤트에 값을 전달할때 arrow 함수 */}
</tbody>
)
}
</table>
</div>
);
}
export default UserList;
728x90
반응형
'React' 카테고리의 다른 글
라우팅 (0) | 2024.07.04 |
---|---|
추가하기 ( input으로 입력 받은 데이터 추가하기 ) (0) | 2024.07.03 |
예외처리 (1) | 2024.07.03 |
서버 연동 (0) | 2024.07.02 |
side Effect ( clean up ) (0) | 2024.07.02 |