React

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

이다닷 2023. 9. 20. 18:00

➡️삭제버튼 추가

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;

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

결과사진

 

저작자표시