자식 컴포넌트에서 이미 부모 컴포넌트로부터 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를 사용할 필요는 없다.
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()
메소드를 적용해보자.
(props.items)
를 상수(filteredExpenses)
로 생성한다. const filteredExpenses = props.items.filter();
);
(filteredExpenses)
에 담긴다.<ExpenseItem />
을 렌더링하는 곳에 매핑하고 싶은 데이터이다. const filteredExpenses = props.items.filter(
(expense) => expense.date.getFullYear().toString() === filteredYear
);
<ExpenseItem />
컴포넌트를 매핑할 때 매핑할 데이터 배열을, 비용 데이터를 모두 담고 있는 배열인 props.items
이 아닌, 필터링된 배열인 filteredExpenses
로 바꿔주면 된다.{filteredExpenses.map((expenses) => (
<ExpenseItem
key={expenses.id}
id={expenses.id}
title={expenses.title}
amount={expenses.amount}
date={expenses.date}
/>
))}
이제 년도를 선택함에 따라 필터링 되어 매핑된 항목들만 화면에 렌더링되는 것을 확인할 수 있다.