Assignment

• 주석에 적힌대로 코드 구현하기

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

function App() {
  const initialState = [
    { id: 1, name: "John", age: 20 },
    { id: 2, name: "Doe", age: 21 },
  ];
  const [users, setUsers] = useState(initialState)
 //문제: TODO: 이름과 나이를 각각 상태로 정의하세요. 초기값은 빈문자열("")입니다.
  
//( 작성 완료)
const [name, setName] = useState('')
const [age, setAge] = useState('')
 
 const handleNameInput = event => {
  setName(event.target.value)
}  

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

 const addUser = (e) => {
    e.preventDefault();
    
 //문제: TODO: 이름과 나이가 모두 입력되지 않았을 때는 alert 처리하고 함수를 종료하세요. 논리합연산자 (||) 를 이용하세요.
  if (name === '' || age === '') alert('이름과 나이를 모두 입력해 주세요')
//문제: TODO: 사용자 리스트 상태를 업데이트 하세요. spread operator 를 사용하고, 추가되는 id는 현재 시간을 밀리초 단위로 반환하는 Date.now() 를 사용하세요.
};

 const removeUser = (id) => {
//문제: TODO: filter 메소드를 사용해서 사용자 삭제 로직을 구현해 보세요.
    setUsers(users.filter((del) => del.id !== id))
  };
    removeUser()
  return (
    <>
      <h1>사용자 리스트</h1>
      <form onSubmit={addUser}>
{/* 문제: TODO: input 태그에 value, onChange 속성을 추가해서 이름과 나이의 상태와 상태변경 로직을 연결하세요 */}
        <input type="text" onChange={handleNameInput} value={name} placeholder="이름" />
        <input type="number" onChange={handelAgeInput} value={age} placeholder="나이" />
        <button  type="submit">사용자 추가</button>
      </form>
      <ul>
{/* 문제: TODO: map 메소드를 이용해서 user 리스트를 렌더링하세요.  */
       
        }
{/* 문제: 이름: John, 나이: 20 [삭제] 버튼이 하나의 행에 나올 수 있도록 해보세요. (hint: flex) */}
      </ul>
    </>
  );
}

export default App;

리액트를 온전히 이해하지 못한 상태에서 기능 구현 코드를 적기에 부족해 이해한 부분만 코드를 작성했지만 내가 모르는 어딘가에서 충돌이 일어나 구현을 못하고 있다..
개념정리와 예제를 더 공부하고 살을 붙여 봐야겠다.