JSX 코드 줄이기(조건부로 출력)

JSX에서 분기처리 할때 아무 생각없이 삼항연산자만 사용하곤 했는데, 

강의를 들으며 다양한 조건부 출력방법이 있어 기록한다.

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

위 코드를 보면 filteredExpenses.length === 0이 참일 때, <p>...</p>이고

거짓일 때, filteredExpenses.map(.....)코드를 출력하는 코드이다.

 

1. && 연산자를 사용하여 조건부 처리

...
return (
  <div>
    {filteredExpenses.length === 0 && <p>No expenses found.</p>}
    {filteredExpenses.length > 0 && 
      filteredExpenses.map((expense) => (
        <ExpensesItem
          key={expese.id}
          title={expense.title}
          amount={exepense.amount}
          date={expense.date}
        />
      ))
    )}
  </div>
)

&&연산자를 추가하고 조건을 만족 했을 때, 렌더링하고 싶은 JSX컨텐츠를 넣는다.
첫번째 조건을 만족했다면? && 연산자 다음에 나오는 내용을 리턴할 것이다.

 

2. 변수를 추가하는 방법

...
let expensesContent = <p>No expenses found.</p>;
// filteredExpenses.length가 0보다 작다면? JSX에서 위 코드가 반환될 것이고,

if(filteredExpenses.length > 0) {
	expensesContent = 
		filteredExpenses.map((expense) => (
        <ExpensesItem
          key={expese.id}
          title={expense.title}
          amount={exepense.amount}
          date={expense.date}
        />
      ))
// filteredExpenses.legnth가 0보다 크다면? 위 코드가 반환될 것이다.
      
return (
  <div>
    {expensesContent}
  </div>
)