조건부 내용 출력하기

조건부 내용은 다른 상황에서 다른 출력값을 렌더링하는 것입니다.

이 조건부 구문을 JSX에서 어떻게 나타낼까요?

해당 연도가 없을 떄 No Expenses를 출력하는 구문을 만들어보겠습니다.

이 강의에서는 3항 연산자를 사용합니다.

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

filteredExpenses.length===0 의 조건에 참이면 아무것도 filter되어있지 않았으므로
<p>태그를 이용해 텍스트를 출력했으며
그렇지 않은 경우에는 기존에 출력했던 구문을 넣었습니다.

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

이와같은 방법도 있습니다.

조건문 && 실행문 구문으로 앞의 조건문이 참이면 and연산자 뒤의 구문을 실행합니다.

let expensesContent = <p>No Expenses found.</p>

변수에 JSX코드를 넣는 방법도 있습니다. 이 방법은 JSX return 이전에 if문으로 처리가 가능합니다.

if(filteredExpenses.length>0){
        expensesContent = filteredExpenses.map(
            (expense)=>
            <ExpenseItem
            key={expense.id}
            title={expense.title} 
            amount={expense.amount} 
            date={expense.date}>  
            </ExpenseItem>)
    }

if문으로 변수값을 JSX값을 넣을 수 있습니다.

이후 기존에 썻던 JSX를 지우고 {expenseContent} 를 JSX코드에 넣어서 보다 간단하게
작성할 수 있습니다.