React - 배열에서 항목 제거하기

- UserList.js -

1. userList함수에서 onRemove라는 props 받아온다.

function UserList( { users, onRemove }){

 

2. onRemove={onRemove} 추가

return (
    <div>
      {
        users.map(
          (user, index) => (
            <User
              user={user}
              key={index}
              onRemove={onRemove}
            />
          )
        )
      }
    </div>
  )

 

3. User 함수에서도 onRemove props로 받아와준다.

function User({ user, onRemove }){

 

4. User 함수에 <button> 추가

return (
    <div>
      <b>{user.username}</b><span>({user.email})</span>
      <button>삭제</button>
    </div>
  );

 

5. button에 onClick속성을 통해 새로운 함수 만들어준다. - 파라미터를 넣어주기 위해

<button onClick={() => onRemove(user.id)}>삭제</button>

 

 

6. 만약 계속 user.~~ 이런식으로 쓰는 게 싫다면, 비구조 할당 사용

function User({ user, onRemove }){
  const {username, email, id} = user;
  return (
    <div>
      <b>{username}</b><span>({email})</span>
      <button onClick={() => onRemove(id)}>삭제</button>
    </div>
  );
}

 

- App.js -

어떤 값을 제거할 때에도, 생성할 때와 마찬가지로 불변성을 지키면서 수행해야한다.

=> filter() 함수 사용하면 해결할 수 있음

 

7. onRemove 함수 생성

- 만약에 user.id가 파라미터로 가져온 id와 일치하지 않는 것만 추출하겠다는 뜻

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

- 만약 id가 3인 값에 대해 onRemove를 수행하면, user.id !== id 가 참인 것들로만 새로운 배열 생성해서 반환(id가 1, 2 인 것들)

 

8. onRemove를 UserList에 전달

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

 

※ 만약 5번 항목에서 onRemove={onRemove(id)} 이런식으로 쓰게되면,

컴포넌트가 렌더링 되는 순간 함수가 바로 실행되면서 모든 값이 삭제된다.

 

 

 

 

 

 

Javascript 배열 내장함수(filter)

 

React - 배열에 항목 추가하기