[React] filter() 메소드로 배열에서 제거 하기

 

  const [posts, setPosts] = useState([
    { id: 1, title: "title1", content: "content1" },
    { id: 2, title: "title2", content: "content2" },
    { id: 3, title: "title3", content: "content3" },
    { id: 4, title: "title4", content: "content4" },
  ])

1. 더미 데이터(배열) 위와 같은 데이터가 있다고 가정. 데이터의 이름은 posts , 이를 제어할 setter함수는 setPosts

모든 데이터는 고유의 ID값이 필요하다 . title과 content 내용이 같을지언정 id는 달라야한다.

사람으로 비유를 하자면 동명인이 있고 나이는 같을 수 있지만 주민등록번호는 다르다. 여기서 id를 주민등록번호라고 생각 하면 쉬울거같다.

 

 

 

 

 

  const onDelete = (id) => {
    const deleteData = posts.filter((item) => {
      return item.id !== id;
    })
    setPosts(deleteData);
  }

2. posts state(데이터)로 filter로 접근 후 콜백 인자로 받은 item 인자 (posts) ID와 onDelete의 파라미터 id 와 일치 하지않을때

반환을 하고, deleteData 라는 변수에 담는다.

deleteData라는 변수를 setPosts() 에 담아서 state를 업데이트 시킨다. (filter처리를 하고 난 뒤 반드시 setPosts 즉 스테이트 변경을 꼭 해줘야 반영이된다 ) 

 

 

 

 

      {posts.map((item, idx) => {
        return (
          <StyledDivBlock key={idx}>
            <div>번호{item.id} / {item.title} {item.content}</div>
            <button onClick={() => { onDelete(item.id) }}>DEL</button>
          </StyledDivBlock>
        )
      })}

StyleDivBlock 이라는 style-component 태그에 데이터를 뿌려준뒤 , 같이 생성되는 버튼에 posts에 map 콜백 인자로 받은 item.id가

위에 선언한 onDelete(id) 파라미터 값으로 들어올 것이고 이말은 클릭한 버튼의 아이디가 " 이것인 아이디" 를 삭제하라는 뜻이다.

리액트의 배열을 다룰 때는 항상 불변성 유지를 하는게 좋으므로 , filter 메소드를 이용하는게 좋다.

 

 

여기서 부가 설명이 들어가자면 보통 리액트에서 이벤트 핸들 처리 할때 onClick={함수명} 이렇게 하지, onClick={함수명() } 이렇게 작업하진 않는다 .

이유는 뒤에 () 를 붙히게 되면 해당 컴포넌트가 렌더링이 되는것과 동시에 함수를 바로 실행 시켜버리기 때문이다.

하지만 onDelete 의 경우 제거 함수가 실행될떄마다 함수가 실행할 아이디 즉 필터 처리 할 아이디값을 받아와야 한다.

만약에 onClick 에 콜백함수를 넣지 않고 바로 하면 렌더링이 됨과 동시에 이 함수가 실행이 되어서 아무것도 렌더링이 되지 않을것이다.

그래서 위와 같은 문제를 해결하기위에 콜백함수를 넣어주고 해당 함수가 실행 될때 item.id를 받아와서 실행시키는 방법으로 처리를 하는것이다.