React

삭제

pjh8838 2024. 7. 3. 13:27
반응형
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