데이터의 렌더링 목록

-expenses.js

import React, { useState } from "react";
import ExpenseItem from "./Expenseltem"
import Card from '../UI/Card';
import ExpensesFilter from './ExpensesFilter';
import './Expenses.css'
function Expenses(props) {
    const [filteredYear, setFilteredYear] = useState('2020');
    const filterChangeHandler = selectedYear => {
        setFilteredYear(selectedYear);
    }

    return (
        <div>
            <Card className="expenses">
                <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler} />
                <ExpenseItem
                    title={props.items[0].title}
                    amount={props.items[0].amount}
                    date={props.items[0].date} />
                <ExpenseItem
                    title={props.items[1].title}
                    amount={props.items[1].amount}
                    date={props.items[1].date} />
                <ExpenseItem
                    title={props.items[2].title}
                    amount={props.items[2].amount}
                    date={props.items[2].date} />
                <ExpenseItem
                    title={props.items[3].title}
                    amount={props.items[3].amount}
                    date={props.items[3].date} />
            </Card>
        </div>
    )
}

export default Expenses;

기존에 Expense.js에 데이터 렌더링 목록은 하드코딩으로 각각의 배열로 데이터를 불러왔다.

하지만 어떤 프로그래밍이든 이러한 방법은 좋지 못하다.

 

import React, { useState } from "react";
import ExpenseItem from "./Expenseltem"
import Card from '../UI/Card';
import ExpensesFilter from './ExpensesFilter';
import './Expenses.css'
function Expenses(props) {
    const [filteredYear, setFilteredYear] = useState('2020');
    const filterChangeHandler = selectedYear => {
        setFilteredYear(selectedYear);
    }

    return (
        <div>
            <Card className="expenses">
                <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler} />
                {/* 표준 자바스크립트 내장 기능 map() 메소드 */}
                {/* map() 메소드는 다른 배열을 기반으로 새로운 배열을 생성하는데 원본배열에 있는 모든 요소들을 변환합니다.  */}
                {/* 모든 expense객체를 틀별한 객체 JSX요소로 변환 */}
                {props.items.map(expense => <ExpenseItem
                    title={expense.title}
                    amount={expense.amount}
                    date={expense.date}
                />)}
            </Card>
        </div>
    )
}

export default Expenses;

자바스크립트 메소드인 map() 을 활용해서 똑같은 결과를 만들어낸 코드이다.