배열에 항목 삭제, 수정

삭제

배열 항목의 삭제 방법은 key값을 이용해주는게 편하다.
onRemove 함수를 보면 key값으로 사용하고 있는 user의 id값을 비교하여 그 조건이 맞을 경우
새로운 배열을 반환하는 filter 메소드를 사용하고 있다. 당연히 변화를 감지해 렌더링을 해주기 위한 불변성 유지 때문이다.

App.js

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

export default function App() {
  const [inputs, setInputs] = useState({
    username: "",
    age: ""
  });
  const { username, age } = inputs;

  const [users, setUsers] = useState([
    {
      id: 1,
      username: "Kim",
      age: 20
    },
    {
      id: 2,
      username: "Lee",
      age: "30"
    },
    {
      id: 3,
      username: "Choi",
      age: "40"
    }
  ]);

  const nextId = useRef(4);

  const onInputChange = e => {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };

  const onCreate = () => {
    const user = {
      username,
      age,
      id: nextId.current
    };
    setUsers([...users, user]);
    setInputs({
      username: "",
      age: ""
    });
    nextId.current += 1;
  };

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

  return (
    <div>
      <CreateUser
        username={username}
        age={age}
        onChange={onInputChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} />
    </div>
  );
}

이제 삭제버튼이 들어가는 user 컴포넌트에 필요한 내용을 props로 내려주고 삭제 버튼을 만들어 준다.
여기서 onRemove에 user.id를 넘긴 함수를 넣어줘야하기 때문에 함수로 감싸서 onClick에 넣어준다.

UserList.jsx

//UserList.jsx
import React from "react";

const User = ({ user, onRemove }) => {
  return (
    <>
      <p>
        username: {user.username}, age: {user.age}{" "}
        <button
          onClick={() => {
            onRemove(user.id);
          }}
        >
          삭제
        </button>
      </p>
    </>
  );
};

const UserList = ({ users, onRemove }) => {
  return (
    <>
      {users.map(user => {
        return <User user={user} key={user.id} onRemove={onRemove} />;
      })}
    </>
  );
};

export default UserList;

수정

수정도 마찬가지 key 값인 user.id를 이용해서 처리한다. onToggle 함수도 id값을 받아와서 비교를 통해 active의 논리값을 반전 시켜준다.
당연히 불변성 유지도 해줘야 변화를 감지해 렌더링이된다.

App.js

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

export default function App() {
  const [inputs, setInputs] = useState({
    username: "",
    age: ""
  });
  const { username, age } = inputs;

  const [users, setUsers] = useState([
    {
      id: 1,
      username: "Kim",
      age: 20
    },
    {
      id: 2,
      username: "Lee",
      age: "30"
    },
    {
      id: 3,
      username: "Choi",
      age: "40"
    }
  ]);

  const nextId = useRef(4);

  const onInputChange = e => {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };

  const onCreate = () => {
    const user = {
      username,
      age,
      id: nextId.current,
      active: false
    };
    setUsers([...users, user]);
    setInputs({
      username: "",
      age: ""
    });
    nextId.current += 1;
  };

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

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

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

UserList.jsx

//UserList.jsx
import React from "react";

const User = ({ user, onRemove, onToggle }) => {
  return (
    <>
      <div>
        <span
          style={{
            cursor: "pointer",
            color: user.active ? "red" : "#000"
          }}
          onClick={() => {
            onToggle(user.id);
          }}
        >
          username: {user.username}, age: {user.age}{" "}
        </span>
        <button
          onClick={() => {
            onRemove(user.id);
          }}
        >
          삭제
        </button>
      </div>
    </>
  );
};

const UserList = ({ users, onRemove, onToggle }) => {
  return (
    <>
      {users.map(user => {
        return (
          <User
            user={user}
            key={user.id}
            onRemove={onRemove}
            onToggle={onToggle}
          />
        );
      })}
    </>
  );
};

export default UserList;