15. 배열에 항목 수정하기

벨로퍼트와 함께하는 모던 리액트/15. 배열에 항목 수정하기/be641188-760d-496e-8103-42539526f669_Export-15682884-30d2-4720-9c04-b648c583aac1/15 배열에 항목 수정하기 dfc9e607385541f3bf3e419ac2456145.md

@@ -0,0 +1,265 @@
+# 15. 배열에 항목 수정하기
+
+소유자: 지연 박
+생성 일시: 2024년 7월 5일 오전 8:21
+
+## 코드 만들기
+
+---
+
+<aside>
+💡 **User 컴포넌트**에 계정명을 클릭했을 때 색상이 초록색으로 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현한다.
+
+</aside>
+
+1. App 컴포넌트의 users 배열 안의 객체 안에 active라는 속성을 추가한다.
+
+**App.js**
+
+```html
+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]',
+      active: true
+    },
+    {
+      id: 2,
+      username: 'tester',
+      email: '[email protected]',
+      active: false
+    },
+    {
+      id: 3,
+      username: 'liz',
+      email: '[email protected]',
+      active: false
+    }
+  ]);
+
+  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} onToggle={onToggle} />
+    </>
+  );
+}
+
+export default App;
+```
+
+1. User 컴포넌트에서 방금 넣어준 active 값에 따라 폰트의 색상을 바꿔주도록 한다. cursor 필드를 설정해 마우스를 올렸을 때 커서가 손가락 모양으로 변하도록 한다.
+
+**UserList.js**
+
+```html
+import React from 'react';
+
+function User({ user, onRemove }) {
+  return (
+    <div>
+      <b
+        style={{
+          cursor: 'pointer',
+          color: user.active ? 'green' : 'black'
+        }}
+      >
+        {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;
+```
+
+1. App.js 에서 onToggle이라는 함수를 구현할 것이다. 배열의 불변성을 유지하면서 배열을 업데이트 할 때에도 map 함수를 사용할 수 있다. id 값을 비교해서 id가  다르다면 그대로 두고, 같다면 active값을 반전시키도록 구현을 하면 된다.
+
+→ onToggle 함수를 만들어서 UserList 컴포넌트에 전달한다.
+
+**App.js**
+
+```html
+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]',
+      active: true
+    },
+    {
+      id: 2,
+      username: 'tester',
+      email: '[email protected]',
+      active: false
+    },
+    {
+      id: 3,
+      username: 'liz',
+      email: '[email protected]',
+      active: false
+    }
+  ]);
+
+  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));
+  };
+  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;
+```
+
+1. UserList 컴포넌트에서 onToggle을 받아와서 User에게 전달해주고, onRemove를 구현했던 것처럼 onToggle에 id를 넣어서 호출한다.
+
+**UserList.js**
+
+```html
+import React from 'react';
+
+function User({ user, onRemove, onToggle }) {
+  return (
+    <div>
+      <b
+        style={{
+          cursor: 'pointer',
+          color: user.active ? 'green' : 'black'
+        }}
+        onClick={() => onToggle(user.id)}
+      >
+        {user.username}
+      </b>
+      &nbsp;
+      <span>({user.email})</span>
+      <button onClick={() => onRemove(user.id)}>삭제</button>
+    </div>
+  );
+}
+
+function UserList({ users, onRemove, onToggle }) {
+  return (
+    <div>
+      {users.map(user => (
+        <User
+          user={user}
+          key={user.id}
+          onRemove={onRemove}
+          onToggle={onToggle}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default UserList;
+```