[React] List array item 제거하기 w/ filter

local storage를 사용해 새로 입력하는 데이터들이 클라이언트 브라우저에 저장되고,

그 저장된 데이터를 가져와 화면에 리스트로 표현하는 작업을 했습니다.

추가로 데이터를 좀 더 넣어 그럴듯하게 만들어보겠습니다.

 

이미 리스트 화면상에 있지만 ㅎㅎ

삭제 버튼도 만들고, 이제 함수를 만듭시다.

 

// Post.js

const PostItem = ({ handleClick, contents, handleDelete }) => {
  return (
    <>
      {contents.length > 0 ? (
        contents.map((content, index) => (
          <Post key={index} id={content.id}>
            <PostTitle onClick={() => handleClick(content)}>
              {content.title}
            </PostTitle>
            <WrapPostInfo>
              <PostCratedAt>{content.visitedAt}</PostCratedAt>
              <PostDelete onClick={handleDelete}>
                Del
              </PostDelete>
            </WrapPostInfo>
          </Post>
        ))
      ) : (
        <div>콘텐츠가 없습니다.</div>
      )}
    </>
  );
};

export default PostItem;

참 현재 컴포넌트들을 분리해놓았습니다.

그래서 Post.js 내 PostItem이라는 컴포넌트는

부모컴포넌트로부터 handleClick, contents, handleDelete라는 .props 를 받아오구요,

handleDelete는 App.js에서 작성할것입니다.

 

// App.js

  const handleDelete = (id) => {
    let newPost = contents.filter((content) => content.id !== id);
    setContents(newPost);
    localStorage.setItem("contents", JSON.stringify(newPost));
  };

리스트에서 항목을 제거할 때 filter함수를 씁니다.

개인적으로 이해한 바는, A를 클릭했을 때 A를 배열에서 삭제하자- 가 아닌,

A를 클릭했을 때 A를 제외한 나머지 항목을 다시 배열로 만들자-로 이해하는 게 좀 더 쉬웠던 거 같습니다.

 

그래서 내가 클릭한 그 항목의 id를 파라미터로 가져오고,

새로운 배열(newPost)를 contents를 바탕으로 filter 메소드를 사용해서 만드는데,

각 단일 content는 content 의 id가 내가 클릭한 그 id 와 같지 않는 항목들로만 구성하도록 하는겁니다.

그렇게 추려낸(filter한) newPost들을 setContents로 재배열하구요,

setContents했으니 localStorage에도 반영해줍니다.

 

그리고 처음 Post.js에서 작성한 handleDelete함수를,

아이템을 클릭했을 때만 작동하도록 arrow function으로 수정해줍니다.

파라미터로 받는 id는 content의 id이므로 이것도 잊지 않고 넣어줍니다.

<PostDelete onClick={() => handleDelete(content.id)}>
  Del
</PostDelete>

 

 

테스트결과 local storage에서도 잘 삭제되고, 리스트 화면에도 잘 반영되며,

새로 추가하더라도 local storage와 리스트 화면 양 쪽에 정상적으로 작동합니다.

 

 

필터를 쓰는 방법과 왜 arrow function을 쓰는 지에 대해서는 아래의 참고한 글과 댓글에

너무 감사하게도 아주 상세히! 작성되어있으니 참고 바랍니다.

https://react.vlpt.us/basic/14-array-remove.html

14. 배열에 항목 제거하기 · GitBook

 

댓글내용