리액트 배열에 데이터 삭제하기

배열에서 filter 메서드를 이용하여 배열을 삭제할 수 있다.

 

state에 선언된 배열을 삭제하는 하는 방법은 다음과 같습니다.

1) 삭제하고자 하는 배열 데이터의 key 값을 조회합니다.

2) 배열 데이터를 탐색하여 key값과 불일치되는 값을 state에 갱신합니다.

 

1)의 경우, 삭제하고자 하는 데이터의 onClick 이벤트로 해당 key값을 인자로 넘깁니다.

 

function Animal({animal,onRemove}){
    return(
        <li className="animal">
            <span>{animal.id} : </span>
            <b>{animal.animalType}</b>
            <span> {animal.sound}</span>
            <button className="delete_button" onClick={()=>onRemove(animal.id)}>삭제</button>
        </li>
    );
}

 

2)의 경우, 상위 컴포넌트에서 filter메서드를 사용하여 animal.id와 다른 값을 state에 세팅합니다.

//animals state에 데이터 삭제
const onRemove=(id)=>{
    //id가 일치하지 않은 animals의 데이터만 animals로 다시 세팅
    setAnimals(animals.filter(animal=>animal.id!=id));
}

* filter 이용방법

배열 . filter (배열 데이터 이름 선언 => 조건문)

 

결과