배열에 항목 제거하기

 

이번에는 배열에 항목을 제거 해보자

앞의 글과 계속 이어지는 중

 

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 컴포넌트에게 전달 해줄것임

 

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

 

불변성을 지키면서 특정 원소를 배열에서 제거하기 위해서는 filter 배열 내장함수를 사용하는것이 가장 편함

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

 

App 컴포넌트에서 onRemove 를 아래와 같이 구현 후 UserList 에 전달하자

 

import React, {useRef, useState} from 'react';
import CreateUser from './components/CreateUser';
import UserList from "./components/UserList";

function App() {

    const [inputs, setInputs] = useState({
        username: '',
        email: ''
    });

    const {username, email} = inputs;

    const onChange = e => {
      const { name, value } = e.target;
      setInputs({
          // spread
          ...inputs,
          [name]: value
      });
    };

    // useState 를 사용하여 컴포넌트의 상태로 관리
    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
        };
        // concat 함수
        setUsers(users.concat(user));
        
        // spread 함수
        // setUsers([
        //     //spread 문법
        //     ...users,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;

결과

삭제 버튼을 눌러보자

잘 없어진다 ㅋ