배열 항목 제거하기

배열 항목 제거하기

 

삭제 버튼을 누르면 등록해뒀던 계정명과 이메일이 삭제되는 것을 볼 수 있다.

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;

 

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 : 'silver',
        email: 'public.les0498@gmail.com'
      },
      {
        id : 2, 
        username : 'tester',
        email: 'tester@example.com'
      },
      {
        id : 3, 
        username : 'gold',
        email: 'gold@example.com'
      },
  
    ]);

    const nextId = useRef(4);
    const onCreate = () => {
      const user = {
        id: nextId.current,
        username,
        email
      };
      setUsers([...users, user]);

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

    const onRemove = 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;

 

여기서 onRemove 는 " id가 __인 객체를 삭제하라 " 라는 역할을 가지고 있다. 

 

onRemove는 UserList에서 전달 받고, 이를 그대로 User 컴포넌트에 전달한다. 

배열에 있는 항목을 제거할 때에는 추가할 때와 마찬가지로 불변성을 지켜가면서 업데이트를 해준다. 

 

불변성을 지키면서 특정 원소를 제거하기 위해  filter 배열 내장 함수를 사용한다. 

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

 

 

🔑 핵심 포인트 

배열에서 요소 지우기

-filter를 사용하여 false 인 값만 담는다. 

-태그에서 변수를 전달하고 싶을땐 아래와 같이 작성한다.

<button onClick={() => onRemove(param)}>