[React] filter ()

필터 메소드를 활용하여 클릭한 것을 삭제하는 기능을 만들어보자.

filter는 배열메소드로 필터링을 해서 일부내용을 걷어내고 새롭운 배열을 만들어내는 개념이다.

 

📌작성코드

import { useState } from "react";
import ReviewList from "./components/ReviewList";
import MockItems from "./mock.json";

const App = () => {
  const [items, setItems] = useState(MockItems); //초기값을 목데이터로 설정
  const [order, setOrder] = useState("createdAt");
  const sortedItems = items.sort((a, b) => b[order] - a[order]);

  const handleNewClick = () => {
    setOrder("createdAt");
  };

  const handleBestClick = () => {
    setOrder("rating");
  };

  const handleDelete = (itemId) => { //인자 값
    const nextItems = items.filter((item) => item.id !== itemId); // filter는 배열 메소드 이다.
    // items 배열에 filter 메소드를 쓴것, 괄호 안에는 콜백 함수
    // item.id 와 매개변수로 받은 id가 다른것만 필터를해서 걸러달라 = 누른것만 빼고 남겨줘.
    setItems(nextItems); //state에 저장
  };

  return (
    <div>
      <div>
        <button onClick={handleNewClick}>최신순</button>
        <button onClick={handleBestClick}>베스트순</button>
      </div>
      <ReviewList items={sortedItems} onDelete={handleDelete} />
    </div>
  );
};
export default App;

부모컴포넌트에서 우선 handleDelete 함수를 만들어주었다.

인자로는 itemId를 받았고, items배열에 filter메소드를 사용!

내가 원하는건 클릭한 값을 삭제하는 기능이기때문에

item.id(원래 데이터의 아이디값) 와 내가 클릭했을때 itemId(클릭 값) 가

다르면 필터링 해달라는 뜻으로 !== 를 넣어주었다. 

 

 그럼 반대로,

===를 넣어주면 어떻게 될까?

item.id가 같아지게 되고, 그 데이터만 필터되어서 

클릭한 데이터만 남고 나머지는 다 사라지게 된다. 

 

열심히 만든 handleDelete 함수를 onDelete 프롭스로 전달하고, 

자식 컴포넌트에 전달해준다. 

 

📍자식컴포넌트

import styled from "styled-components";

function formatDate(value) {
  const date = new Date(value);
  return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}`;
}
const ReviewListItem = ({ item, onDelete }) => {
  const handleDeleteClick = () => onDelete(item.id);

  return (
    <ReviewListItemWrap>
      <ReviewListItemImg src={item.imgUrl} alt={item.title} />
      <div>
        <h1>{item.title}</h1>
        <p>{item.rating}</p>
        <p>{formatDate(item.createdAt)}</p>
        <p>{item.content}</p>
        <button onClick={handleDeleteClick}>삭제</button>
      </div>
    </ReviewListItemWrap>
  );
};
export default ReviewListItem;

클릭했을때 삭제되는 기능을 원하기때문에 

버튼을 만들어주고 handleDeleteClick이라는 함수를 만들어준다.

이때 프롭스로 전달받은 onDelete 프롭에 (item.id) 를 넣어주는 이유는? 

items 라는 데이터에 객체 형식으로 접근해야하기때문에.

 

결과? 잘지워짐