13. 배열 항목 수정해보기

일단 users 배열안의 객체에게 'active' 라는 속성을 추가로 주고 시작!

// App.js
  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
    }
  ]);

객체의 active 값에 따라 폰트의 색상이 바뀌도록 + 마우스를 올렸을 때 커서가 손가락 모양으로 변하도록 구현!

// UserList.js
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>
  );
}

이번에는 App.js에서 onToggle 함수를 생성하여 active 값을 반전시켜보기!

→ 이때도 map을 써서 불변성을 지키는 업데이트를!

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

그리고 App.js > UserList로 onToggle을 받아오고, 그걸 또 User한테 전달해준다.

// UserList.js
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>
  );
}

---

출처 : https://react.vlpt.us/basic/15-array-modify.html

15. 배열에 항목 수정하기 · GitBook