12. 배열에서 항목을 제거하는 방법

// UserList.js
import React from 'react';

function User({ user, onRemove }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove }) {
  return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} onRemove={onRemove} />
      ))}
    </div>
  );
}

export default UserList;

 

일단 username (email) 옆에 삭제 버튼을 달아주는데 그 버튼의 onClick 이벤트한테 user.id 를 props로 넘겨줘야 한다.

<button onClick={() => onRemove(user.id)}>삭제</button>

이 onRemove 함수는 App.js에서 구현 > UserList에서 받아서 > User 에게도 전달해줄 것이다.

// App.js
const onRemove = id => {
    // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
    // = user.id 가 id 인 것을 제거함
    setUsers(users.filter(user => user.id !== id));
  };

배열에 있는 항목을 제거할 때도 마찬가지로 불변성을 지켜가면서 업데이트를 해주어야 한다.

불변성을 지키면서 특정 원소를 배열에서 제거하기 위한 방법은 filter 내장 함수를 이용하는 것!

→ 배열에서 특정 조건이 만족하는 원소들만 추출해서 새로운 배열을 만들어주는 개념

---

출처 : https://react.vlpt.us/basic/14-array-remove.html

14. 배열에 항목 제거하기 · GitBook