[React] 배열에서 항목 삭제하기

배열에서 항목 삭제하기... 저~~~~엉말 많이 쓰니까 이번에 잘 알아두자~!

플젝 하면서도 진짜 많이 썼다.

 

이전편을 보고오면

2022.01.25 - [수업/React] - [React] 배열에 항목 추가하기

[React] 배열에 항목 추가하기

 

코드가 이어지니까...

 

 

 

UserList.js

부분에 추가할 부분이 있다.

onRemove 함수를 받아와야 한다.

 

import React from 'react';

function User({ user, onRemove }) {
  return (
    <div>
      <b>{user.username}</b>
      <span>
        (
        {user.email}
        )
      </span>
      <button type="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;

 추가 된 부분은 각 배열 요소를 뿌려줄때 버튼 하나를 더 만들어서 onRemove 함수를 만들어준다.

그리고 onClick 이 되면 onRemove 함수가 작동되도록 한다. 

이때 onRemove 함수에 인자값으로 user.id 를 보낸다. 

user.id 에 해당하는 원소를 제거하기 위해서 이다.

그리고 인자값이 있으니 애로우 함수로 보내준다.

 

 

 

 

 

App.js 

위에는 생략하고 추가된 부분을 보자

 

const onRemove = (id) => {
    // user.id가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
    // 즉 user.id가 id 인것을 제거함
    setUsers(users.filter((user) => user.id !== id));
  };
  return (
    <div>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} />
    </div>
  );

onRemove 함수를 보며녀

인자값으로 받은 id = user.id 값이다.

 

filter 함수를 사용해서 배열에서 id(인자값) 가 user.id랑 일치하지 않는 녀석들만 새로 배열을 만들어준다.

그리고 그 새로운 배열을 setUsers로 배열의 상태값을 업데이트 해준다.