조건 명령문 반환 추가하기

기존에 있던 if문에서 NewExpenseForm이 나오는 창과 ExpenseList를 분리 해보겠습니다.

지금까지는 한 컴포넌트에 있었지만, 이걸 ExpenseList 컴포넌트를 만들어서 거기다가 분리 하겠습니다.

const [filteredYear,setFilteredYear] = useState('2020');
    const selectYear = (year)=>{
        setFilteredYear(year);
    }
    
    
const filteredExpenses = props.items.filter(expense=>{
        return expense.date.getFullYear().toString() === filteredYear
      });



    return(
        <div>
            <Card className="expenses">
            <ExpenseFilter 
            selected={filteredYear} 
            onAddSelect={selectYear} 
            />
            <ExpensesList items={filteredExpenses} />
            </Card> 
            {/* filter+map chain */}
        </div>

filteredExpenses라는 변수에 App에서 받아온 item배열을 filteredYear에 맞게 filter해서
배열을 새로 생성합니다.

그리고 또한 이 변수는 ExpenseList로 props로 전달합니다.

App->Expense->ExpenseList로 데이터를 전달해줍니다.

filteredYear는 useState를 통해 상태로 관리됩니다.

ExpensesList 컴포넌트로 가보겠습니다.

const ExpensesList = (props)=>{

    if(props.items.length===0){
        return (<h2 className="expenses-list__fallback">Found no expenses</h2>)
    }//no expenses return this jsx code

    return(
        <ul className='expenses-list'>
            {props.items.map(
            (expense)=>
            <ExpenseItem
            key={expense.id}
            title={expense.title} 
            amount={expense.amount} 
            date={expense.date}>  
            </ExpenseItem>)}
        </ul>
    )//always return
}

전달받은 props를 이용해서 조건문을 만들어줍니다.

해당 배열의 크기가 0(아무것도 없음) 이면 Found no expenses를 출력해주는 jsx return code를 작성해줍니다.

그리고, 항상 return하는 jsx구문을 만들어줍니다.

아무것도 없는 상태면 아래 구문은 빈 화면으로 리턴됩니다.