리엑트- 기존항목에 새로운것을 추가해보기

완성코드

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

const App = () => {


  const [users, setUsers] = useState([
    { id: 1, name: "장원영", age: 20 },
    { id: 2, name: "윈터", age: 21 },
    { id: 3, name: "김채원", age: 22 },
    { id: 4, name: "로제", age: 23 },
    { id: 5, name: "하니", age: 24 },
  ])

  const [newName, setNewName] = useState('');
  const [newAge, setNewAge] = useState('');

  const oncChangeAge = (event) => {
    setNewAge(event.target.value);
  }

  const clickAddButtonHandler = () => {
    const newUser = {
      id: users.length+1,
      name: newName,
      age: newAge
    }
    setUsers([...users, newUser]);
    
    alert("추가 버튼이 클릭되었습니다.")
  }


  return (
    <div>
    <div>
      <br />
      <div>
        이름:&nbsp; 
      <input
      value={newName}
      onChange= {
        (event)=>{
          setNewName(event.target.value);
        }
      }
      />
      </div>
      <br />
      <br />

      <div> 나이:&nbsp;
      <input
      value = {newAge}
      onChange = {oncChangeAge}
      ></input>
      <br /><br />

      <button
      onClick={clickAddButtonHandler}
      >
        추가버튼
      </button>

      </div>

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

    </div>
    </div>
  );
};

export default App;

• 제목 그대로 기존에 있던 리스트에서 새로운 항목을 추가한다고 했을때, 어떻게 추가해야하는지에 대한 예시코드입니다.

• 기존에 있던 user 리스트를 useState 로 만들고 나서 인풋값에 입력한 값들을 버튼을 클릭해서 setState 로 기존 리스트에 추가되고 난 후 재랜더링이 되어서 보여주는 형태로 구현이 됩니다