[React] 배열에 항목 제거하기

🍊 이번 시간에는 배열에 항목 제거하기에 대해서 알아보겠다.

function UserList({users, onRemove}){

  return (

      users.map((user) => {

          return <User

          key={user.id}

          id={user.id}

          username={user.username}

          email={user.email}

          onRemove={onRemove}/>

      })

  )

}

UserList 컴포넌트를 열어주고, 여기서  onRemove를 props에서 받아와서 User 컴포넌트에 전달해준다.

 

function User({id, username, email, onRemove}){

    return (

        <div>

            <b>{username}</b><span>({email})</span>

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

        </div>

    )

}

User 컴포넌트에서는 삭제 버튼을 하나 만들고 버튼을 클릭했을 때 삭제가 될 수 있도록 onClick 이벤트에 함수를 추가한다.

이 때 클릭하였을 때 특정 id를 가진 값을 배열에서 삭제해주고 싶기 때문에 위와 같이 함수에 id를 넣는다.

onClick에서 새로운 함수를 만들어주는게 헷갈릴 수도 있는데, 이게 어떤 의미냐면 "이 버튼이 눌렸을 때는 이런 함수를 호출할거다.

이 함수에서는 onRemove를 id값을 파라미터 값으로 넣어서 호출할것이다" 라는 의미이다.

 

💥💥💥주의할 것: <button onClick={onRemove(id)}>로 사용하지 않도록 꼭 주의한다.

이렇게 하면 컴포넌트가 렌더링되는 시점에 해당 함수가 즉시호출되기 때문이다.

 

🍊 filter 함수 사용하기

배열에서 특정 항목을 제거하기 위해서는 불변성을 지켜가면서 업데이트를 해줘야 하는데, 이 때 filter라는 함수를 사용하면 편하다. 이 함수는 배열에서 특정 조건을 만족하는 요소들만 추출해서 새로운 배열을 만들어준다.

 

const onRemove = (id) => {

    setUsers(users.filter(user => user.id !== id));

  };

우리는 App 컴포넌트 안에서 onRemove라는 함수를 만든다.

이 함수는 setUsers를 하는데, users 배열안의 각각의 항목 user의 id가 해당 id와 다른 것들만 새 배열로 반환해준다.

(여기서 id는 삭제할 대상의 id가 되니까)

 

return (

    <>

      <CreateUser username={username} email={email} onChange={onChange} onCreate={onCreate}/>

      <UserList users={users} onRemove={onRemove}/>

    </>

  );

그리고 App 컴포넌트에서 onRemove를 props로 전달해준다.