[React] 리액트 배열에 항목 제거하기

※ 본 포스팅은 윈도우11 환경에서 패스트 캠퍼스 강의를 수강하며 정리한 내용입니다.

---

목차

 

filter를 사용한 배열 항목 제거

요약

 

---

---

리액트 배열에서 특정 아이템을 삭제할 때는 불변성을 지켜가며 업데이트해 줘야 한다.

이때 filter라는 함수를 사용하면 편하다.

filter는 배열에서 특정 조건이 만족하는 원소들만 추출하여 새로운 배열을 만든다.

https://devyihyun.tistory.com/144

[JavaScript] 배열 내장 함수

 

filter 함수를 통해 만족하는 경우 : 새로운 배열을 만들어서 그 배열에 넣는다.

filter 함수를 통해 만족하지 않는 경우 : 넣지 않는다.

// UserList.js //
import React from "react";

function User({user, onRemove}){
    const {username,email,id}=user;
    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;

// CreateUser.js //
import React from "react";

function CreateUser({username,email,onChange,onCreate}){
    return(
        <div>
            <input name="username" placeholder="계정명" onChange={onChange} value={username}/>
            <input name="email" placeholder="이메일" onChange={onChange} value={email}/>
            <button onClick={onCreate}>등록</button>
        </div>
    );

}

export default CreateUser;

// App.js //
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 : 'uni',
        email : 'uni@gmail.com'
    },
    {
        id : 2,
        username : 'dog',
        email : 'dog@gmail.com'
    },
    {
        id : 3,
        username : 'cat',
        email : 'cat@gmail.com'
    }
]);

  const nextId = useRef(4);
  const onCreate = () =>{
    const user = {
      id: nextId.current,
      username,
      email
      
    }
    setUsers(users.concat(user));
    setInputs({
      username:'',
      email:''
    });
    //console.log(nextId.current)
    nextId.current +=1;
    
  console.log(users)
  }

  const onRemove = 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;

 

---

// UserList.js //
// 1번 방법
<button onClick={()=>onRemove(user.id)}>삭제</button>

// 2번 방법
const {username,email,id}=user;
<button onClick={()=>onRemove(user)}>삭제</button>

users.map(
	user =>(<User user={user} key={user.id} onRemove={onRemove}/>)
)

User 컴포넌트의 삭제 버튼이 클릭될 때는 user.id 값으로 props로 받아올 onRemove함수의 파라미터로 넣어 호출해 주어야 한다.

이 함수에서는 props로 받아온 onRemove에 id 값을 파라미터로 넣어 호출한다.

여기서 onRemove "id가 __인 객체를 삭제해라"라는 역할을 가지고 있다. 결국 id가 특정 값인 것을 삭제한다.

이때 onClick = {onRemove(id)}로 하면 절대 안 된다.

컴포넌트가 렌더링 될 때 onRemove가 호출되면서 렌더링 되는 시점에 삭제가 된다.

렌더링 된 순간 onRemove함수가 호출된다.

컴포넌트가 렌더링 되는 순간 다 사라진다.

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

filter 함수를 통해 각 user 객체를 확인한다.

이때 user.id가 파라미터로 가져온 것과 일치하지 않은 것들만 추출한다.

파라미터가 일치한다면 false가 되어 해당 배열에서 제외된다.

만약 해당 값이 일치하지 않는다면 삭제할 필요가 없어 계속 가지고 있게 된다.

users.filter : 파라미터로 받아온 id로 각 요소를 비교

 

<요약>

filter를 사용하여 false인 값만 담는다.

태그에서 변수를 전달하고 싶을때 사용한다.

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

<button onClick={() => onRemove(param)}>버튼</button>

 

 

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

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

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