입력값 받아 띄우기

import React, { useState } from "react"
import './App.css';

function App() {

  const [users, setUsers] = useState([
    { id: 1, age: 30, name: "송중기" },
    { id: 2, age: 24, name: "송강" },
    { id: 3, age: 21, name: "김유정" },
    { id: 4, age: 29, name: "구교환" }
  ])

  const [name, setName] = useState('')
  const [age, setAge] = useState('')

  const nameChangeHandler = (event) => {
    setName(event.target.value)
  }

  const ageChangeHandler = (event) => {
    setAge(event.target.value)
  }

  const clickAddButtonHandler = () => {
    //1. 새로운 형태의 newUser 만든다.
    // newUser : { id: 1, age: 30, name: "송중기" }
    const newUser = {
      id: users.length + 1,
      age,
      name
    }

    //2. newUser 배열에 더한다 (불변성 유지를 위해 아래와 같이 한다)
    setUsers([...users, newUser])

  }

  return (
    <div>
      <div>
        이름 : &nbsp;
        <input value={name} onChange={nameChangeHandler}/>
        <br />
        나이 : &nbsp;
        <input value={age} onChange={ageChangeHandler}/>
        <br />
        <button onClick={clickAddButtonHandler}>저장</button>
      </div>

      <div className="app-style">
        {users.map(item => {
          return (
            <div key={item.id} className="box-style">
              {item.age} - {item.name}
            </div>
          )
        })}
      </div>
    </div>

  )
}

export default App;

• 처음 상태
  
• 값 입력