react 기본 - 10.배열 항목 추가

CreateUser.js

import React from 'react';

const User = ({user}) => {
    return(
        <>
            <b></b><p>{user.username} "{user.email}" <br /></p>
        </>
    )
}

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

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() {
    // React Hooks 동적처리
    // 비구조화 할당 : 값 === inputs , setInputs === 함수명
    const [inputs, setInputs] = useState({
       usersname: '',
       email: ''
    });
    // 비구조화 할당을 통해 값 추
    const {username, email} = inputs;
    // 체인지 이벤트
    const onChange = e => {
        // 우선 e.target 에서 name 과 value 를 추출
        const {name,value} = e.target;
        setInputs({
            // inputs 객체 복사
           ...inputs,
            // name 키를 가진 값을 value로 설정
           [name]: value
        });
    }
    // React Hooks 동적처리
    // 비구좌 할당 : 값 === 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 함수 복사 및 user 추가
        setUsers([...users, user]);
        // setInputs 초기화
        setInputs({
           username: '',
           email: ''
        });
        // +1 추가
        nextId.current += 1;
    }

    return (
        <React.Fragment>
            <Inner>
                <CreateUser
                    username={username}
                    email={email}
                    onChange={onChange}
                    onCreate={onCreate}
                />
                <UserList users={users}/>
            </Inner>
        </React.Fragment>
    );
}

export default App;