<React> 조건부 출력

각각 다른 상황에서 다양한 출력값을 렌더링한다.

1. 삼항 연산자 조건부 출력

삼항연산자

import React, { useState } from "react";

import ExpenseItem from "./ExpenseItem";
import Card from "../UI/Card";
import "./Expenses.css";
import ExpensesFilter from "../NewExpense/ExpenseFilter";

const Expenses = (props) => {
  console.log("props", props.items);
  const [filterYear, setFilterYear] = useState("2020");

  const onAddDropDownFilterValue = (selectedYear) => {
    console.log("Expenses selectedYear : ", selectedYear);
    setFilterYear(selectedYear);
  };

  const filterExpenses = props.items.filter((expense) => {
    return expense.date.getFullYear().toString() === filterYear;
  });
  return (
    <div>
      <Card className="expenses">
        <ExpensesFilter
          selected={filterYear}
          onAddDropDownFilterValue={onAddDropDownFilterValue}
        />
         ✅ // 삼항 연산자로 조건부 출력
        {filterExpenses.length === 0 ? (
          <p>No expenses found</p>
        ) : (
          filterExpenses.map((expense) => {
            return (
              <ExpenseItem
                key={expense.id}
                title={expense.title}
                amount={expense.amount}
                date={expense.date}
              />
            );
          })
        )}
      </Card>
    </div>
  );
};

export default Expenses;

2. && 연산자로 각각 독립 표현식으로 나누어서 처리

&& 연산자로 각각 독립 표현식으로 나누어서 처리

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

3. 변수에 저장하여 사용
   expenseContents 변수에 조건부 함수를 설정하여 값을 오버라이드 하거나 그대로 초기값을 쓰거나.

expenseContents 변수에 조건부 함수를 설정하여 값을 오버라이드 하거나 그대로 초기값을 쓰거나.

import React, { useState } from "react";

import ExpenseItem from "./ExpenseItem";
import Card from "../UI/Card";
import "./Expenses.css";
import ExpensesFilter from "../NewExpense/ExpenseFilter";

const Expenses = (props) => {
  console.log("props", props.items);
  const [filterYear, setFilterYear] = useState("2020");

  const onAddDropDownFilterValue = (selectedYear) => {
    console.log("Expenses selectedYear : ", selectedYear);
    setFilterYear(selectedYear);
  };

  const filterExpenses = props.items.filter((expense) => {
    return expense.date.getFullYear().toString() === filterYear;
  });
// ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
✅  let expenseContents = <p>No expenses found</p>;

  if (filterExpenses.length > 0) {
    expenseContents = filterExpenses.map((expense) => {
      return (
        <ExpenseItem
          key={expense.id}
          title={expense.title}
          amount={expense.amount}
          date={expense.date}
        />
      );
    });
  }
// ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
  return (
    <div>
      <Card className="expenses">
        <ExpensesFilter
          selected={filterYear}
          onAddDropDownFilterValue={onAddDropDownFilterValue}
        />
✅       {expenseContents}
      </Card>
    </div>
  );
};

export default Expenses;

3번 방식처럼 변수 지정 후, 조건을 걸어서 오버라이드 하는 방향이 코드가 제일 깔끔할 것이다.