조건부 내용 출력 - 삼항연산자 대신 논리연산자 사용해보기

• 자바스크립트 메뉴에 넣으려다가 삼항연산자, 논리연산자 자체에 대한 설명이 아니라
  리액트에서의 사용에 관한 포스팅이기 때문에 리액트 메뉴에 포함시킴

 

삼항연산자로 조건부 내용 출력

{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 expenseContent = <p>No expenses found </p>;
  if (filteredExpenses.length > 0) {
    expenseContent = filteredExpenses.map((expense) => (
      <ExpenseItem
        key={expense.id}
        title={expense.title}
        amount={expense.amount}
        date={expense.date}
      />
    ));
  }
  return (
    <>
      <ExpenseFilter>
        {expenseContent}
      </ExpenseFilter>
    </>
   );

• 관련 로직은 JSX 코드 바깥으로 꺼내 더 가독성 좋고 깔끔하게 만들 수 있다.

 

또는 이렇게 할 수도 있겠다.

 if (filteredExpenses.length == 0)  return <p>No expenses found </p> ;

 return (
   <>
     <ExpenseFilter>
       {filteredExpenses.map((expense) => (
          <ExpenseItem
            key={expense.id}
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
          />}
      </ExpenseFilter>
    </>
   );