배열에 항목 추가하기

input에 입력된 값들이 button을 눌렀을 때 배열에 추가되도록 구현하였다.
(기본 state값들을 App.js에서 설정하였다.)

UserList.js

import React from 'react';

function User({user}){
  return(
    <div>
      <b>{user.username}</b> <span>{user.email}</span>
    </div>
  )
}

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

export default UserList;

CreateUser.js

import React from "react";

function CreateUser({username, email, onChange, onCreate}){
  return(
    <div>
      <input 
      name="username"
      placeholder="계정명"
      onChange={onChange}
      value={username}
      />
      <input 
      name="email"
      placeholder="이메일"
      onChange={onChange}
      value={email}
      />
      <button onClick={onCreate}>등록</button>
    </div>
  )
}

export default CreateUser;

App.js

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

const App = () => {
  const [input, setInput] = useState({
    username: '',
    email: ''
  })//input state 상태 관리를 위한 useState 설정

  const {username, email} = input;
  //input state안의 username, email 값들을 밖에서 사용하기 위해 꺼냄 

  const onChange =(e)=>{
    const {name, value} = e.target;
    setInput({
      ...input,
      [name]:value
      //[]의 의미는 key값을 쓰겠다는 의미이다. 
      //[name] 이 username과 email 두가지의 경우가 있는데, 
      //onChange 라는 하나의 함수로 여러값을 저장하기 위해 사용하였다.<- Point!
      //만약 그냥 name 으로 한다면 key가 "name"인 value를 바꾸는 것이다.
      //예시로 그냥 username 으로 한다면 key가 "username"인 value를 바꾸는 것이기 때문에
      //onChange의 함수가 실행됬을 때 정해진 하나의 값을 저장할 수 밖에 없다. 
      //따라서 유동적으로 여러 값을 관리하기 위해 []를 사용한다.!!
      //객체상태의 state값의 변경과 spread 문법은 "useState를 이용한 여러 개의 input 상태 관리" 글 참조
    })
  }
  //input 태그에 값이 입력될 때마다 input state 업데이트 

  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);
  //useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 X

  const onCreate = () => {
    const newUser ={
      id: nextId.current,
      username:username,
      email:email
    }
    setUsers([
      ...users, newUser
    ])
    setInput({
      username: '',
      email: ''
    })

    nextId.current += 1;
  }
  return(
    <div>
      <CreateUser username={username} email={email} onChange={onChange} onCreate={onCreate}/>
      <UserList users={users}/>
    </div>
  )
}

export default App;

정상적으로 추가된 것을 알 수 있다.