배열에 항목 제거하기

Delete 버튼을 눌렀을 때 해당 항목이 제거되는 기능을 구현하였다.

UserList안의 User 컴포넌트에 삭제 버튼을 추가하였다.

UserList.js

import React from 'react';

function User({ user, onRemove }) {//UserList에서 받아온 props들
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>//<- Point!
    </div>
  );
}

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

export default UserList;

User 컴포넌트는 App -> UserList -> User 순서로 전달된 props인 onRemove 함수를 사용한다.

onRemove 함수에서 배열에 있는 항목을 제거할 때에는 추가할 때와 마찬가지로 불변성을 지켜가면서 업데이트를 해주어야 한다.

불변성을 지키면서 특정 원소를 배열에서 제거하기 위해서는 filter 배열 내장 함수를 사용하는 것이 가장 편하다. 이 함수는 배열에서 특정 조건이 만족하는 원소들만 추출하여 새로운 배열을 만들어 반환한다.

App 컴포넌트에서 onRemove 를 구현한 후, UserList 에게 전달해준다.

App.js

import React, {useState, useEffect, useRef} from 'react';
import CreateUser from "./Components/CreateUser";
import UserList from "./Components/UserList";

const App = () => {
  const [input, setInput] = useState({
    username: '',
    email: ''
  }) 

  const {username, email} = input;

  const onChange =(e)=>{
    const {name, value} = e.target;
    setInput({
      ...input,
      [name]:value
    })
  }

  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ]);
  
  const nextId = useRef(4);

  const onCreate = () => {
    const newUser ={
      id: nextId.current,
      username:username,
      email:email
    }
    setUsers([
      ...users, newUser
    ])
    setInput({
      username: '',
      email: ''
    })

    nextId.current += 1;
  }

  const onRemove = (id) => {
    setUsers(users.filter(user => user.id !== id));
  }
  
  return(
    <div>
      <CreateUser username={username} email={email} onChange={onChange} onCreate={onCreate}/>
      <UserList users={users} onRemove={onRemove}/>
    </div>
  )
}

export default App;

정상적으로 항목이 제거된 것을 볼 수 있다.

주의사항

onClick={onRemove(user.id)} 말고 onClick={()=> {onRemove(user.id)} 를 사용해야 하는 이유

onClick={someFunction()} 을 해버리면 해당 컴포넌트가 렌더링 되는것과 동시에 someFunction함수를 실행시켜 버린다. 그래서 보통 onClick={someFunction} 으로 지정해서 ()를 제외하는 방법으로 함수가 즉시 실행되지 않게 하고, 클릭했을 때 실행이 되도록 해준다.

그런데 위 예제의 onRemove 의 경우, 해당 함수가 실행될 때 id값도 받아와야 한다. 이런 경우에 onClick={onRemove(user.id)} 을 해버리면 해당 컴포넌트가 렌더링됨과 동시에 함수가 실행되버려서 렌더링이 되지 않고 오류가 발생한다.

따라서 이런 문제들을 해결하기 위해 onClick에 콜백 함수를 넣고, 해당 함수가 실행될 때 user.id를 건네주어 실행시키는 방법으로 처리를 한다.

출처 및 참고: react.vlpt.us