74. 조건부 내용 출력하기

if 나 for 문은 jsx 중괄호 안에서 사용할 수 없다
대신 삼항 조건식을 이용하여 조건부 내용을 출력할 수 있다

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

 

아니면 아래와 같이 JS를 이용해서 정리해서 작성할 수도 있다.

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

 

또 다른 방법은 깔끔하게 위에서 로직을 정리해서 
jsx 에는 변수만 출력하는 방법인데 아래를 보자

expenseContent에 JSX 문법을 그대로 담아서 
return 에는 expenseContent를 출력하기만 하면 클릭한 년도에 따른 값이 나온다 

세 가지 방법 모두 같은 결과를 보여주지만 이 방법이 제일 JSX 구문을 깔끔하게 만들어준다

let expensesContent = <p>No expenses found.</p>;
  if (filteredList.length > 0) {
    expensesContent = filteredList.map((expense) => (
      <ExpenseItem key={expense.id} title={expense.title} amount={expense.amount} date={expense.date} id={expense.id} />
    ));
  }

  return <Card className="expenses">
    <ExpensesFilter selected={props.selected} onChangeFilter={filterChangeHandler} />
    {expensesContent}
  </Card>