14. 배열에 항목 제거하기

벨로퍼트와 함께하는 모던 리액트/14. 배열에 항목 제거하기/3134fba6-c5c5-4dde-b429-6a6d414c197c_Export-8bd0a8ab-1141-44d8-a9c1-4c754c29fcee/14 배열에 항목 제거하기 a54c251f53bf46c8b0bb2bbec3a88b69.md

@@ -0,0 +1,126 @@
+# 14. 배열에 항목 제거하기
+
+소유자: 지연 박
+생성 일시: 2024년 6월 26일 오전 7:24
+
+## 삭제 버튼 만들어 둔 코드
+
+---
+
+**UserList.js**
+
+```jsx
+import React from 'react';
+
+function User({ user, onRemove }) {
+  return (
+    <div>
+      <b>{user.username}</b> <span>({user.email})</span>
+      <button onClick={() => onRemove(user.id)}>삭제</button>
+    </div>
+  );
+}
+
+function UserList({ users, onRemove }) {
+  return (
+    <div>
+      {users.map(user => (
+        <User user={user} key={user.id} onRemove={onRemove} />
+      ))}
+    </div>
+  );
+}
+
+export default UserList;
+```
+
+User 컴포넌트의 삭제 버튼이 클릭 될 때는 [user.id](http://user.id) 값을 앞으로 props로 받아올 onRemove 함수의 파라미터로 넣어서 호출해주어야 한다.
+
+여기서 onRemove “id가 _인 객페를 삭제해라”라는 역할을 가지고 있습니다.
+
+이 onRemove 함수는 UserList에서도 전달 받을 것이며, 이를 그대로 User 컴포넌트에게 전달해줄 것이다.
+
+*배열에 있는 항목을 제거할 때에는, 추가할 때와 마찬가지로 불변성을 지켜가면서 업데이트 해주어야 한다.
+
+<aside>
+💡 불변성을 지키면서 특정 원소를 배열에서 제거하기 위해서는 **`filter`** 배열 내장 함수를 사용하는 것이 가장 편하다. 
+*이 함수는 배열에서 특정 조건이 만족하는 원소들만 추출해 새로운 배열을 만들어준다.
+
+</aside>
+
+**App.js에서 onRemove 를 구현해 UserList에 전달할 것이다.**
+
+**App.js**
+
+```jsx
+import React, { useRef, useState } from 'react';
+import UserList from './UserList';
+import CreateUser from './CreateUser';
+
+function 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: '[email protected]'
+    },
+    {
+      id: 2,
+      username: 'tester',
+      email: '[email protected]'
+    },
+    {
+      id: 3,
+      username: 'liz',
+      email: '[email protected]'
+    }
+  ]);
+
+  const nextId = useRef(4);
+  const onCreate = () => {
+    const user = {
+      id: nextId.current,
+      username,
+      email
+    };
+    setUsers(users.concat(user));
+
+    setInputs({
+      username: '',
+      email: ''
+    });
+    nextId.current += 1;
+  };
+
+  const onRemove = id => {
+    // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
+    // = user.id 가 id 인 것을 제거함
+    setUsers(users.filter(user => user.id !== id));
+  };
+  return (
+    <>
+      <CreateUser
+        username={username}
+        email={email}
+        onChange={onChange}
+        onCreate={onCreate}
+      />
+      <UserList users={users} onRemove={onRemove} />
+    </>
+  );
+}
+
+export default App;
+```