[React] Study #13 | 배열에 항목 제거하기

저번 포스팅에서 배열에 항목 추가하기에 이어, 항목을 제거하는 기능을 구현해보겠다!

 

1️⃣ 삭제 버튼 렌더링

UserList.js

import React from 'react'

function User({user, onRemove}) {
    return(
        <div>
            <span>{user.username}</span>
            &nbsp;
            <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

• () => onRemove(user.id) : User컴포넌트의 삭제 버튼이 클릭 될 때, user.id값을 앞으로 props로 받아올 onRemove 함수의 파라미터로 넣어서 호출해주어야 한다.
  • 여기서 onRemove "id가 ~인 객체를 삭제해라" 라는 의미!
  • 이 onRemove함수는 UserList에서도 전달받을 것이고 이를 그대로 User 컴포넌트에게 전달해줄 것임!

 

2️⃣ onRemove 함수 구현!

• 배열에 있는 항목을 제거할때는 추가할 때와 마찬가지로 불변성을 지켜가면서 업데이트를 해줘야한다!
• 불변성을 지키면서 특정 원소를 배열에서 제거하기 위해서는 filter 배열 내장 함수를 사용하는 것이 가장 편함!

💡filter ?

• 배열에서 특정 조건이 만족하는 원소들만 추출하여 새로운 배열을 만들어 준다.

 

App 컴포넌트에서 onRemove 구현하고 UserList에게 전달해주기!

App.js

import React,{useRef, useState} from 'react'; 
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {

  const [inputs, setInputs] = useState({
    username: '', email: ''
  })


  const {username, email} = inputs;

  const onChange = e => {

    const {name, value} = e.target;

    setInputs({
      ...inputs,
      [name]: value
    })
  }


  const [users, setUsers] = useState(
    [
      {id: 1, username: 'John', email: 'john@example.com'},
      {id: 2, username: 'Car', email: 'car@example.com'},
      {id: 3, username: 'lee', email: 'lee@example.com'},
    ]
)
    

const nextId = useRef(4);

const onCreate = () => {

    // 새로운 항목을 추가하기 위한 객체
    const user = {
      id: nextId.current,
      username,
      email
    };

    // concat 함수로 새로운 배열을 만들어내기!
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    })
    nextId.current += 1;
};

// 파라미터로 받아온 id
const onRemove = id => {
  // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듦
  // = user.id 가 id인 것을 제거함
  // filter = user.id와 id가 같지 않은 것들만 추출해서 새로운 배열 만들어냄
  setUsers(users.filter(user => user.id !== id))
}

  return (   
    <>
      <CreateUser 
      username={username}
      email={email}
      onChange={onChange}
      onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove}/>
    </>
  );
}

export default App;

출력 화면 : 삭제 버튼을 누르면 항목이 삭제된다!

 

 

---

Reference

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