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

➡️삭제버튼 추가

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}></User>

      ))}

    </div>

  );

}

export default UserList;

변경사진

 

➡️특정 id를 가진 객체를 삭제하는 기능을 가진 onRemove 함수 만들기

 

📌filter 함수

배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만들어주는 함수이다.

 

APP.js 변경

import React, { useRef, useState } from 'react';

import UserList from './qoffhvjxm/UserList';

import CreateUser from './qoffhvjxm/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: 'dndhk',

      email: 'dndhk@gmail.com'

    }, {

      id: 2,

      username: 'Lee',

      email: 'Lee@gmail.com '

    }, {

      id: 3,

      username: 'dada',

      email: 'dada@gmail.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}

      ></CreateUser>

      {/* onRemove를 추가해준다. */}

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

    </>

  );

}

export default App;

주석을 입력한 부분이 추가된 부분이다.

결과사진