[React] 리액트 리스트 추가, 삭제 & 컴포넌트 파일 분리

 

 

내배캠 리액트 입문 수업 중.. 내용 정리!

리스트를 추가 하고 삭제해보자 ~

 

👩‍💻 전체 코드

📁 App.jsx

import React, { useState } from "react";
import "App.css";
import AddButton from "components/AddButton";
import User from "components/User";

function App() {
  const [users, setUsers] = useState([ {/*기존 리스트*/}
    { id: 1, age: 11, name: "요리" },
    { id: 2, age: 12, name: "미나토" },
    { id: 3, age: 34, name: "호리" },
    { id: 4, age: 40, name: "사오리" },
  ]);

  const [name, setName] = useState(""); 
  const [age, setAge] = useState("");

  const nameChangeHandler = (event) => {
    setName(event.target.value); {/*input에 입력하는 값 표시*/}
  };

  const ageChangeHandler = (event) => {
    setAge(event.target.value); {/*input에 입력하는 값 표시*/}
  };

  const clickAddButtonHandler = () => {
    const newUser = {
      id: users.length + 1,
      age: age,
      name,
    }; {/*클릭 시 새 유저를 만들고 */}

    setUsers([...users, newUser]); {/*기존 값을 원래의 users 에 newUser 를 추가한 배열로 set!*/}
  };

  const clickRemoveButtonHandler = (id) => {
    const newUser = users.filter((user) => user.id !== id);
    {/*클릭한 X 의 user.id를 가져와 filter로 그 user 를 제외한 user 만 걸러낸다.*/}

    setUsers(newUser);
  };

  return (
    <div style={{ margin: "20px" }}>
      <div>
        이름 :&nbsp;
        <input value={name} onChange={nameChangeHandler} />
        <br />
        나이 :&nbsp;
        <input value={age} onChange={ageChangeHandler} />
        <br />
        <AddButton addFunction={clickAddButtonHandler}>추가</AddButton>
      </div>
      <div className="app-style">
        {users.map((item) => (
          <User
            key={item.id}
            item={item}
            removeFunction={clickRemoveButtonHandler} {/*props 전달*/}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

 

  는 띄어쓰기 ~

 

 

📁 AddButton.jsx

const AddButton = ({ addFunction, children }) => {
  return (
    <button className="btn" onClick={addFunction}>
      {children}
    </button>
  );
};

export default AddButton;

 

{children} : App.js 의 <AddButton> 내에 있는 "추가"

 

 

📁 User.jsx

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

export default User;

 

클릭한 item의 id props ➡️ clickRemoveButtonHandler 로 전달

그 아이디의 리스트를 지울 수 있게!