• 정적 렌더링 🆚 동적 렌더링

import React, { useState } from 'react';
import ExpenseItem from './ExpenseItem';
import ExpensesFilter from './ExpensesFilter';
import Card from '../UI/Card';
import './Expenses.css';

const Expenses = props => {
    const [filteredYear, setFilteredYear] = useState('2020');
    const filterChangeHandler = selectedYear => {
        console.log('Expenses.js');
        console.log(selectedYear);
        setFilteredYear(selectedYear);
    };
    return (
        <div>
            <Card className="expenses">
                <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler} />
                {/* 아래와 같은 하드 코딩을 expense로 포매팅된 값으로 바꿔준다. */}
                {props.items.map(expense => (
                    <ExpenseItem title={expense.title} amount={expense.amount} date={expense.date} />
                ))}
								
								{/* before */}
                <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;

• 기존에는 before와 같이 하드코딩해서 넣었다면 동적 렌더링을 위해 포맷팅을 시킨다.

• key warning 이해하기

  “Warning: Each child in a list should have a unique "key" prop.”

  • 목록의 item을 매핑할 때는 항상 key를 추가해야한다.

    → 일반적으로 데이터베이스에 있는 아이템을 가져올때 사용한다.

  • key를 추가해서 각각의 개별적인 아이템을 인식할 수 있게 해준다.

  • 이때의 key값은 고유 값을 설정한다.

• filter : 기존 배열을 변경하는 게 아니라 조건에 맞는 새로운 배열을 생성한다.

조건부 컨텐츠

• 요소 값이 없다면 특정 출력문을 나타낸다.

• 삼항 연산자를 사용하는 방법

{filteredExpenses.length === 0 ? (
      <p> No.expense found. </p>
  ) : (
      filteredExpenses.map(expense => <ExpenseItem key={expense.id} title={expense.title} amount={expense.amount} date={expense.date} />)
  )}

• 조건식의 남용

{ filteredExpenses.length === 0 && <p> No.expense found. </p> }
{ filteredExpenses.length > 0 && filteredExpenses.map(expense => <ExpenseItem key={expense.id} title={expense.title} amount={expense.amount} date={expense.date} />)}