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

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;

User 컴포넌트의 삭제 버튼이 클릭 될 때는 user.id 값을 앞으로 props로 받아올 onRemove함수의 파라미터로 넣어서 호출해주어야 한다.
여기서 onRemove "id가 _인 객체를 삭제해라"라는 역할을 가지고 있다.

이 onRemove함수는 UserList에서도 전달받을것이며, 이를 그대로 User 컴포넌트에게 전달해줄 것이다. onRemove 함수를 구현할때, 배열에 있는 항목을 제거할때는 추가할때와 마찬가지로 불변성을 지켜가면서 업데이트해주어야 한다.

불변성을 지키면서 특정 원소를 배열에서 제거하기 위해서는 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: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ]);
  
  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current;
      username, 
      email
    };
    setUsers(users.concat(user));
    
    setInputs({
      username: '';
      email: ''
    });
    nextId.current += 1;
  };
  
  const onRemove = id => {
    // user.id가 파라미터로 일치하지 않은 원소만 추출해서 새로운 배열을 만듬
    // = user.id 가 id인 것을 제거함 
    setUsers(users.filter(user => user.id !== id));
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChage={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} />
    </>
  );
}
export default App;

❗️❗️Caution
onClick={onRemove(user.id)}로 실행해서는 안되는 이유!
함수()라는 방식으로 실행하면 렌더링될때 모든 요소들이 삭제되버리는 것을 확인할 수 있다.
onClick={ onRemove(user.id) } 는 함수를 호출하는 것이고, onChange={ onChange } 에서 onChange 는 함수가 들어있는 변수이다.