컴포넌트폴더 만들고 적용하기

import { useState } from "react";
import "./App.css";
import Button from "./component/Button";
import User from "./component/User";

const 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 = () => {
const newUser = {
id: users.length + 1,
age: age,
name: name,
};

setUsers([...users, newUser]);

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

return (

<div>
  <div>
    이름 :&nbsp;
    <input value={name} onChange={nameChangeHandler} />
    <br />
    나이 :&nbsp;
    <input value={age} onChange={ageChangeHandler} />
    <br />
    <Button clickAddButtonHandler={clickAddButtonHandler}>추가</Button>
  </div>
  <div className="app-style">
    {users.map(function (item) {
      return (
        <User
          key={item.id}
          item={item}
          removeFunction={clickRemoveButtonHandler}
        />
      );
    })}
  </div>
</div>

);
};
export default App;

// 컴포넌트화 시키면 import와 export를 하는것 잊지말기