배열에 항목 제거하기

배열에 항목을 제거하는 방법을 알아보겠습니다.

UserList에서 렌더링 될 때 삭제 버턴을 보여주겠습니다.

import React from 'react'


function User({user,onRemove}){
    return(
        <div>
            <b>{user.name}</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}></User>))}
    </div>
  )
}

export default UserList

User 컴포넌트의 삭제 버튼이 클릭 될 때(onClick) user.id를 param으로 받는 onRemove함수를 실행 시켜줍니다.

여기서 onRemove는 param을 삭제하라는 역할을 가지고 있습니다.

배열에 있는 항목 제거 역시 불변성을 지키면서 업데이트를 해줘야합니다.

불변성을 지키면서 특정 원소를 제거하는 함수에는 filter를 사용하는것이 좋습니다.

App 컴포넌트에서 onRemove를 구현하겠습니다.

  const onRemove = (id) =>{
    setUsers(users.filter(user=>user.id!==id));
    // 해당 조건에 맞는 인덱스만 모아서 새로 추출
    // user.id가 param의 id랑 다른 배열만 모아서 추출
    // 결과적으로 param의id를 가진 배열이 삭제됨
  }