React 조건부 렌더링

아시다시피, 리액트에서는 중괄호를 통해 표준 자바스크립트의 사용이 가능합니다. 다만 if 와 for문은 반영이 안됩니다. 대신 조건문으로는 삼항연산자와 ternary-operator을 사용하는 것이 가능하고, 반복문의 경우 map() 이나 filter를 이용하는 것이 가능합니다.

// map을 통한 복수의 컴포넌트 만들기
{props.items.map((expense) => (
      <ExpenseItem
        title={expense.title}
        amount={expense.amount}
        date={expense.date}
      />
))} 

// 삼항연산자를 통한 조건식 만들기
{filteredExpenses.length === 0 ? (
	<p>No expenses found.</p>
	) : (
    filteredExpenses.map((expense) => (
    <ExpenseItem
    	key={expense.id}
        title={expense.title}
        amount={expense.amount}
        date={expense.date}
    />
  ))
)}

또다른 해결책으로는, 조건부 컨텐츠 자체를 JSX가 아닌 외부에서 처리를 하는 것입니다.