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

import React from 'react';

function User({ user, onRemove }){ // User 컴포넌트는 onRemove를 그대로 받아와야 합니다.
    const { username, email, id}  = user;
    return(
        <div>
            <b>{username}</b> <span>{email}</span>
            <button onClick={() => onRemove(id)}>삭제</button> {/* 버튼이 눌렸을 경우에 이러한 함수를 호출할 것이다. 이 함수에는 props로 받아온 onRemove를 id값을 받아서 파라미터로 호출해줄 것이다*/}
            
        </div>
    )
}

function UserList({ users, onRemove }){
    
    return(
        <div>
            {
                users.map(
                    user => (
                    <User 
                    user={user}
                    key={user.id}
                    onRemove={onRemove}/>)
                )
            }
        </div>
    );
}

export default UserList;

기존 UserList에 onRemove props를 받아와서 onRemove라는 props를 User 컴포넌트에게 전달해줄 것입니다. 

User 컴포넌트는 onRemove를 그대로 받아와야 합니다.

 

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

function App() {
    
    const onCreate = () => {
        const user = { // 새로운 객체를 만들어주고 
            id: nextId.current,
            username,
            email,
        };

        // setUsers(users.concat(user)); // 새로운 배열을 만들어서 괄호 안에 있는 user를 붙여줍니다. 

        setUsers([...users, user]); // 기존의 배열을 복사해서 넣은다음에 새로운 배열을 만들고 뒤에다가 user를 넣어주면 새로운 배열이 만들어집니다 
        setInputs({  // 버튼이 눌렸을 때 초기화되도록 
            username:'',
            email: ''
        });
        console.log(nextId.current); //4;
        nextId.current += 1;
    };

    const onRemove = id => { // filter 함수를 사용하여 특정 조건이 만족할 떄 새로운 배열을 만들어줍니다
        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() 가 호출되게 할 것인데, onRemove에 id 값을 넣어서 호출을 해주고 싶을 경우 파라미터를 넣어주고 싶기 때문에 새로운 함수를 만들어줍니다. 

 

배열에서 제거하기 - filter

배열에서 특정 아이템을 삭제할 때에는 불변성을 지켜가면서 업데이트를 해줘야합니다. 

이 때 filter라는 함수를 사용하면 편합니다. 이 함수는 배열에서 특정 조건이 만족하는 원소들을 추출해서 새로운 배열을 만들어줍니다. 

 

onRemove는 id 값을 가져와서 user.id가 파라미터로 가져온 것이랑 일치하지 않는 것을 추출해주겠다.

setUsers 해서 users.filter() 를 해서 각 아이템들을 비교하는데 파라미터로 받아온 id랑 비교를 합니다. 

filter가 만족한다면 새로운 배열에 넣고 , 만족하지 않을 경우 새로운 배열에 넣지 않습니다.