기존 코드

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])

    setName('')
    setAge('')
  }

  //삭제 버튼 클릭(X)
  const clickRemoveButtonHandler = (id) => {
    setUsers(users.filter(user => user.id !== id))
  }

  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}
              <button onClick={() => clickRemoveButtonHandler(item.id)}>X</button>
            </div>
          )
        })}
      </div>
    </div>

  )
}

export default App;

수정 코드

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])

    setName('')
    setAge('')
  }

  //삭제 버튼 클릭(X)
  const clickRemoveButtonHandler = (id) => {
    setUsers(users.filter(user => user.id !== id))
  }

  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 (
            <User
              key={item.id}
              item={item}
              clickRemoveButtonHandler={clickRemoveButtonHandler}
            />
          )
        })}
      </div>
    </div>

  )
}

const User = ({ item, clickRemoveButtonHandler }) => {
  return (
    <div key={item.id} className="box-style">
      {item.age} - {item.name}
      <button onClick={() => clickRemoveButtonHandler(item.id)}>X</button>
    </div>
  )
}

export default App;