리엑트 - 삭제하기 2가지 방법

1. filter 를 사용한 삭제

import React from "react";
import { useState } from "react";
import "./App.css";

const App = () => {


  const [users, setUsers] = useState([
    { id: 1, name: "장원영", age: 20 },
    { id: 2, name: "윈터", age: 21 },
    { id: 3, name: "김채원", age: 22 },
    { id: 4, name: "로제", age: 23 },
    { id: 5, name: "하니", age: 24 },
  ])

  const [newName, setNewName] = useState('');
  const [newAge, setNewAge] = useState('');

  const oncChangeAge = (event) => {
    setNewAge(event.target.value);
  }

  // 추가하기 버튼을 클릭했을 때 실행되는 함수
  const clickAddButtonHandler = () => {
    const newUser = {
      id: users.length+1,
      name: newName,
      age: newAge
    }
    setUsers([...users, newUser]);
    
    alert("추가 버튼이 클릭되었습니다.")
  }

  // 삭제하기 버튼을 클릭했을 때 실행되는 함수
  const clickDeleteButtonHandler = (id) => {
    alert('아이디를 삭제합니다')
    const newUsers = users.filter((item)=>{
      return item.id !== id;
    })
    setUsers(newUsers);
  }


  return (
    <div>
    <div>
      <br />
      <div>
        이름:&nbsp; 
      <input
      value={newName}
      onChange= {
        (event)=>{
          setNewName(event.target.value);
        }
      }
      />
      </div>
      <br />
      <br />

      <div> 나이:&nbsp;
      <input
      value = {newAge}
      onChange = {oncChangeAge}
      ></input>
      <br /><br />

      <button
      onClick={clickAddButtonHandler}
      >
        추가버튼
      </button>

      </div>

  
    </div>
    <div className="app-style">
      {users.map((item)=>{
        return(
          <div key = {item.id} className="component-style">
            {item.name} - {item.age}
            <button
            onClick={()=>clickDeleteButtonHandler(item.id)}
            >삭제</button>
          </div>
        )
      })}

    </div>
    </div>
  );
};

export default App;

첫번째 삭제 방법인 filter를 사용해서 스테이트를 변경형하는 방법입니다.

로직은 순서는 다음과 같습니다.

1. 삭제버튼을 클릭하면 clickDeleteButtonHandler 함수를 실행하도록설정

2. 이때 어떤것을 삭제해야될지를 명시해야되기 때문에 item.id 값을 미리 전달해줍니다.(함수가 바로 실행되는것을 막기 위해서 onClick={()=>clickDeleteButtonHandler(item.id)} 로 괄호를 한개 더 생성해서 화살표 함수로 변경해주는것도 잊지 말아야 합니다. )

3. 이후 전달받은 id 값을 토대로 filter 함수를 통해서 새로운 유저리스트를 만듭니다.

4. 만든 리스트대로 useState 를 사용해서 최종 변경된 값으로 다시 변경해서 재랜더링이 될 수 있도록 해줌으로써 삭제가 되는 것을 볼 수 있습니다.

2. slice 를 사용해서 삭제하는 방법

  // 삭제하기 버튼 - splice 사용
  const clickDeleteButtonHandler = (id) => {
    alert('아이디를 삭제합니다');
    const indexToDelete = users.findIndex((user) => user.id === id);
    const newUsers = [...users];
    newUsers.splice(indexToDelete, 1);
    setUsers(newUsers);
  };

사실 첫번째 방법은 필터링으로 보여주는 것이라서 실제로 지웠다기 보다는 안보이게 해서 삭제한것처럼 보여주는 느낌이기 강합니다.

filter 보다는 자바스크립트 문법을 많이 사용해서 조금 복잡해보이지만, 실제로 메모리상에서도 지우는 방법 역시 소개해보겠습니다.

위 로직을 설명하면 다음과 같습니다.

1. 전달된 id 값을 받아서 findIndex 를 사용해서 user.id 가 전달받은 id 가 일치하는 값의 인덱스를 찾습니다ㅏ.

2. newUsers 에 새롭게 기존 리스트를 복사합니다.

3. 새로운 유저리스트에서 splice 를 사용해 찾은 id 값이 일치하는 인덱스를 한개만 지워주고 재할당 합니다.

4. 변경된 값을 setUsers 로 변경해서 재랜더링 해줍니다.