react 기본 - 11.배열 항목 제거

배열 항목 제거

불변성을 지키면서 특정 원소를 배열에서 제거하기 위해서 filter 배열 내장 함수를 사용하는 것이 편하며,
filter는 특정 조건이 만족하는 원소들만 추출하여 새로운 배열을 만들어줍니다.

UserList.js

import React from 'react';

const User = ({user, onRemove}) => {
    return(
        <>
            <p><b>{user.username}</b> "{user.email}" <button onClick={() => onRemove(user.id)} type="button">삭제</button></p>
        </>
    )
}

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

export default UserList;

App.js

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

function App() {
	// 동적으로 처리
	// 비구조 할당으로 inputs === 값, setInputs === 함수명
	// 빈값 설정
    const [inputs, setInputs] = useState({
       usersname: '',
       email: ''
    });
	// 비구조 할당으로 값 추출
    const {username, email} = inputs;
	// 체인지 이벤트
    const onChange = e => {
	// e.target 이름과 값 추출
        const {name,value} = e.target;
	// setInputs 중 inputs 복사
        setInputs({
           ...inputs,
			//name 키를 가진 값을 value로 설정
           [name]: value
        });
    }
	// users라는 값과 setUsers 함수로 동적으로 처리
    const [users, setUsers] = useState ([
        {
            id: 1,
            username: 'a',
            email : 'aaa@gmail.com'
        },
        {
            id: 2,
            username: 'b',
            email : 'bbb@gmail.com'
        },
        {
            id: 3,
            username: 'c',
            email : 'ccc@gmail.com'
        }
    ]);
	// 초기값 4로 설정후 변수에 담기
    const nextId = useRef(4);
	
    const onCreate = () => {
        const user = {
            id: nextId.current,
            username,
            email
        }
        setUsers([...users, user]);
		// setInputs 빈값 설정
        setInputs({
           username: '',
           email: ''
        });
        nextId.current += 1;
    }

    const onRemove = id => {
        // user.id가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열 만듬
        // user.id가 id 인 것을 제거함
        setUsers(users.filter(user => user.id !== id));
    }
    return (
        <React.Fragment>
            <Inner>
                <CreateUser
                    username={username}
                    email={email}
                    onChange={onChange}
                    onCreate={onCreate}
                />
                <UserList users={users} onRemove={onRemove}/>
            </Inner>
        </React.Fragment>
    );
}

export default App;