투두리스트 삭제하기 | .filter() | Javascript

Javascript의 filter메서드를 이용해서 투두리스트 삭제기능을 구현해보자.
Typescript를 사용하긴 했지만 filter메서드는 JS 문법!

➡️ 깃허브 가기

filter()

// 기본 형태
arr.filter(callback(element)) // 필수 구성
arr.filter(callback(element,index,array),thisArg) // 옵션 포함

• callback: 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다. 세가지 매개변수를 받는다.
  - element: 처리할 현재 요소.
  - index(옵션): 처리할 현재 요소의 인덱스.
  - array(옵션): filter를 호출한 배열.
• thisArg(옵션): callback을 실행할 때 this로 사용하는 값.

filter() 예시

const numArr = [1,2,3,4,5];

const newNumArr = numArr.filter((num)=> num >= 3);

console.log(newNumArr); //[3, 4, 5]

투두리스트 예시 코드

삭제버튼을 누르면 필터 메서드를 사용해서 해당 리스트가 가지고 있는 고유 id에
해당하지 않는(삭제 안할 리스트들) 리스트만 새롭게 배열이 구성된다.

ListItem.tsx

// id: 삭제할 리스트의 고유 id
// listArr, setListArr: 전체 투두리스트 배열 state
const ListItem = ({id, listArr, setListArr}) => {
  const clickDeleteBtn = () => {
    const newListArr = listArr.filter((list) => list.id !== id)
    // newListArr: listArr 중 현재 id와 일치하지 않는 list의 배열
    setListArr(newListArr)// setListArr로 listArr를 업데이트
  }
  return (
    <button onClick={clickDeleteBtn}>
    삭제하기
    <button/>
    )
}

Reference
MDN

질문이나 잘못된 점이 있다면 댓글 부탁드립니다😊