Daily Coding - FE 3주차 - 34강

34강

리스트 필터링

리스트에 필터를 걸어주기 위해서는 state로 조건을 가지고 있고, filter() 메서드를 사용해서 매번 state가 바뀔 때마다 업데이트 해준다.

컴포넌트가 바뀔때마다 리랜더링이 발생한다.

import React, {useState} from 'react';

import ExpenseItem from "./ExpenseItem";
import Card from "../UI/Card";
import "./Expenses.css";
import ExpensesFilter from './ExpensesFilter';

const Expenses = (props) => {
	const [filteredYear, setFilteredYear] = useState('2023');

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

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

	let filterCheck = <p>선택지가 없습니다.</p>
	if(filteredExpenses.length > 0) {
		filterCheck = filteredExpenses.map((item) => (
				<ExpenseItem
					title={item.title}
					amount={item.amount}
					date={item.date}
				/>
			))
	}


	return (
		<Card className="expenses">
			<ExpensesFilter
				selected={filteredYear}
				onChangeFilter={filterChangeHandler}
			/>
			{filterCheck}
		</Card>
	);
};

export default Expenses;

 

 

import React, {useState} from 'react';

import ExpenseItem from "./ExpenseItem";
import Card from "../UI/Card";
import "./Expenses.css";
import ExpensesFilter from './ExpensesFilter';

const Expenses = (props) => {
	const [filteredYear, setFilteredYear] = useState('2023');

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

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

	return (
		<Card className="expenses">
			<ExpensesFilter
				selected={filteredYear}
				onChangeFilter={filterChangeHandler}
			/>
		{filteredExpenses.length > 0 ?
			filteredExpenses.map((item) => (
			<ExpenseItem
					title={item.title}
					amount={item.amount}
					date={item.date}
				/>
			)) : <p>선택지가 없습니다.</p>
		}
		</Card>
	);
};

export default Expenses;