React- 배열의 항목 제거 하기

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

배열의 항목 제거 하기

 

UserList.js

우선 UserList 에서 각 User 컴포넌트를 보여줄 때 삭제 버튼을 렌더링 해준다.

 

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.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: 'programexplorer',
      email: 'programexplorer@naver.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@gmail.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@daum.net'
    }
  ]);

  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}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} />
    </>
  );
}

export default App;

 

실행 결과

 

삭제 버튼을 누르니 삭제가 되는 것을 알 수 있다.