react 기본 - 12.배열 항목 수정

배열 항목 수정

App.js

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

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

    const {username, email} = inputs;

    const onChange = e => {
        const {name,value} = e.target;
        setInputs({
           ...inputs,
           [name]: value
        });
    }
    //활성화 구분을 active로 true,false로 동적 처리 
    const [users, setUsers] = useState ([
        {
            id: 1,
            username: 'a',
            email : 'aaa@gmail.com',
            active: true
        },
        {
            id: 2,
            username: 'b',
            email : 'bbb@gmail.com',
            active: false
        },
        {
            id: 3,
            username: 'c',
            email : 'ccc@gmail.com',
            active: false
        }
    ]);
    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));
    }
	// 배열의 불변성을 유지하면서 업데이트 할 때 map 함수 사용
	// id 값이 같으면 현상 유지, 다르면 active 값 반전
    const onToggle = id => {
        setUsers(
            users.map(user => user.id === id ? {...user, active: !user.active} : user )
        )
    }
    return (
        <React.Fragment>
            <Inner>
                <CreateUser
                    username={username}
                    email={email}
                    onChange={onChange}
                    onCreate={onCreate}
                />
                <UserList users={users} onRemove={onRemove} onToggle={onToggle}/>
            </Inner>
        </React.Fragment>
    );
}

export default App;

UserList.js

import React from 'react';

// onToggle 받기
const User = ({user, onRemove, onToggle}) => {
    return(
        <>
		// 클릭시 onToggle id 넣어서 호출로 스타일링 구분
            <p><b onClick={() => onToggle(user.id)} style={{cursor:'pointer', color: user.active ? 'green' : 'black'}}>{user.username}</b> "{user.email}" <button onClick={() => onRemove(user.id)} type="button">삭제</button></p>
        </>
    )
}

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

export default UserList;