react 조건부 내용 출력

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

조건부로 내용을 출력할 때 삼항 연산자를 사용한다.

{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}/>
                ))}

너무 길어질땐 이렇게 나눠서도 가능하다.

앞의 조건이 맞으면 뒤를 랜더링한다.

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

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

이게 제일 깔끔한 것 같다.