[React] 추가, 삭제 기능 구현

import React, { useState } from "react";

const App = () => {

  // 초기 데이터 객체 리스트
  const [names, setNames] = useState([
    { id: 1, text: "눈사람" },
    { id: 2, text: "얼음" },
    { id: 3, text: "눈" },
    { id: 4, text: "바람" },
  ]);

  //입력한 텍스트 state
  const [InputText, setInputText] = useState("");

  //추가 할 데이터 객체의 Id state
  const [nextId, setNextId] = useState(names.length+1); // 리스트 길이 +1로 설정

  //이벤트 객체의 입력한 텍스트 감지 함수
  const onChange = (e) => {
    setInputText(e.target.value);
  };
  // 데이터 객체 리스트를 map을 이용하여 변환 렌더링
  const nameList = names.map((name) => <li key={name.id}>{name.text}</li>);

  // 리스트에 데이터 추가 함수
  const addList = () => {
    if(InputText===''){ alert('입력하셈 ㅡㅡ'); } // 입력한 값이 없으면 경고문 출력
    else{
      // 불변성의 원칙을 지키기 위해 기존 names 리스트에 추가 할 데이터를 concat하여 새로운 리스트(nextNames)에 복사하여 setNames로 반영한다.
      const nextNames = names.concat({
          id:nextId,  // 아이디는 nextId 값
          text:InputText, // text는 입력한 값
      });
      setNextId(prev=>prev+1); //추가한 후 nextId 값 1증가
      setNames(nextNames);  // 기존 리스트(names)를 렌더링 하고 있던 것을 데이터를 추가한 리스트(nextNames)로 바꾸어 렌더링
      setInputText(''); // 입력값 초기화
    }
  } 

  // 리스트에 데이터 삭제 함수
  const removeList = () =>{
    // 불변성의 원칙을 지키기 위해 기존 names 리스트에 삭제 할 데이터를 filter하여 새로운 리스트(nextNames)에 복사하여 setNames로 반영한다.
    const nextNames = names.filter(name => InputText!==name.text); // 입력된 텍스트와 같은 데이터를 삭제한다
    setNames(nextNames); // 데이터 반영
  }

  return (
    <div>
      <input value={InputText} onChange={onChange} />
      <button onClick={addList}>추가</button>
      <button onClick={removeList}>제거</button>
      <ul>{nameList}</ul>
    </div>
  );
};

export default App;