[REACT] 배열 항목 수정하기

이름 클릭 시 이름의 색이 회색으로 변함

import React, { useRef, useState } from "react";
import CreateUser from "./CreateUser";
import UserList from "./UserList";

const App = () => {
  const [inputs, setInputs] = useState({
    username: "",
    email: ""
  });
  const { username, email } = inputs;
  const onChange = (e) => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: "velopert",
      email: "public.velopert@gmail.com",
      active: true
    },
    {
      id: 2,
      username: "tester",
      email: "tester@example.com",
      active: false
    },
    {
      id: 3,
      username: "liz",
      email: "liz@example.com",
      active: false
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));
    //setUsers([...users, user])와 같은 방식임.
    //새로운 배열 객체 리턴.
    setInputs({
      username: "",
      email: ""
    });
    nextId.current += 1;
  };

  const onRemove = (id) => {
    setUsers(users.filter((user) => user.id !== id));
  };

  const onToggle = (id) => {
    setUsers(
        users.map((user) =>
          user.id === id ? { ...user, active: !user.active } : user
        )
    )
  };

  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} onToggle={onToggle} />
    </>
  );
};

export default App;

users state에는 active라는 속성 추가

  const onToggle = (id) => {
    setUsers(
        users.map((user) =>
          user.id === id ? { ...user, active: !user.active } : user
        )
    )
  };

state 불변성에는 영향을 주지않으면서 배열 업데이트 하기 위해서는 MAP 사용.