filter() 메소드를 활용하여 배열의 항목 중 원하는 항목만 렌더링하기

자식 컴포넌트에서 이미 부모 컴포넌트로부터 props로 데이터를 받고 있다면, 이 데이터를 활용하여 filter() 메소드를 사용하면 된다.

📚 Array.filter()

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
//
const result = words.filter(word => word.length > 6);
console.log(result);
// Array ["exuberant", "destruction", "present"]

• filter()는 true나 false를 반환하는데, true를 반환하는 항목들을 새로운 배열로 반환된다.
• filter()는 완전히 새로운 배열 반환한다. 그 배열로 아이템 유지하거나 제거하면 된다.

렌더링되는 방법이나 렌더링되어야 하는 배열 요소의 수를 바꾸고 싶다면, map()이나 filter()등의 메소드를 활용한 간단한 데이터 변환(transform)만으로도 원하는 요소만 렌더링할 수 있다! state 자체를 필터링해서 데이터를 유실하고 싶은것이 아니기 때문에 useState를 사용할 필요는 없다.

filter()사용하여 필터링된 배열 데이터를 컴포넌트에 매핑하여 렌더링하기

(예제) 📍 Expenses.js

import Card from "../UI/Card";
import "./Expenses.css";
import ExpenseItem from "./ExpenseItem";
import ExpensesFilter from "./ExpensesFilter";
import { useState } from "react";

const Expenses = (props) => {
  const [filteredYear, setFilteredYear] = useState("2020");

  const filterChangedYearHandler = (selectedYear) => {
    setFilteredYear(selectedYear);
  };

  //🔥
  const filteredExpenses = props.items.filter(
    (expense) => expense.date.getFullYear().toString() === filteredYear
  );
 
  return (
    <Card className="expenses">
      <ExpensesFilter
        onChangeFilterYear={filterChangedYearHandler}
        selected={filteredYear}
      />
      {//🔥
        filteredExpenses.map((expenses) => (
        <ExpenseItem
          key={expenses.id}
          id={expenses.id}
          title={expenses.title}
          amount={expenses.amount}
          date={expenses.date}
        />
      ))}
    </Card>
  );
};

export default Expenses;

필터링할 배열 데이터props.items에 filter() 메소드를 적용해보자.

1. 필터링할 배열 데이터(props.items)를 상수(filteredExpenses)로 생성한다.

 const filteredExpenses = props.items.filter();
  );

2. date의 연도가 필터에서 선택한 연도와 같은 경우 true를 반환하고 아닌 경우 false를 반환하는 함수식을 만들어 filter()에 전달한다.
   • 그러면 true로 반환된 배열의 요소들을 담은 새로운 배열이 만들어지고 상수(filteredExpenses)에 담긴다.
   • 이 데이터가 바로 map()메소드를 사용하여 <ExpenseItem />을 렌더링하는 곳에 매핑하고 싶은 데이터이다.

 const filteredExpenses = props.items.filter(
    (expense) => expense.date.getFullYear().toString() === filteredYear
  );

3. <ExpenseItem /> 컴포넌트를 매핑할 때 매핑할 데이터 배열을, 비용 데이터를 모두 담고 있는 배열인 props.items이 아닌, 필터링된 배열인 filteredExpenses로 바꿔주면 된다.

{filteredExpenses.map((expenses) => (
        <ExpenseItem
          key={expenses.id}
          id={expenses.id}
          title={expenses.title}
          amount={expenses.amount}
          date={expenses.date}
        />
      ))}

이제 년도를 선택함에 따라 필터링 되어 매핑된 항목들만 화면에 렌더링되는 것을 확인할 수 있다.