5.2 리스트 렌더링 및 조건부 Content: 조건부 출력(feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

조건부 출력하기

• 조건부 리스트 출력을 해보자

삼항 연산자 사용하기

JSX문법을 사용하여 3항연산자를 사용하면 조건부 출력을 할 수 있다.

return (
    <div>
      <Card className="expenses">
        <ExpensesFilter
          selected={filteredYear}
          onChangeFilter={filterChageHandler}
        />
        {/* 삼항 연산자를 활용해 조건부 출력 */}
        {filteredExpenses.length === 0 ? (
          <p>No expenses found.</p>
        ) : (
          filteredExpenses.map((expense) => (
            <ExpenseItem
              key={expense.id} // id를 key값으로 설정
              title={expense.title}
              amount={expense.amount}
              date={expense.date}
            />
          ))

삼항 연산자 부분을 가독성 좋게 바꾸면 아래와 같이 바꿀 수 있다.

&& 조건을 사용

왼쪽 피연산자가 true 이면 오른쪽 피연산자를 true로 하여 출력

아래의 코드는 두개의 독립 표현식을 사용해 각각 다른 조건을 준다.

{filteredExpenses.length === 0 && <p>No expenses found.</p>} // 길이가0일때 p태그 구문을 실행
{filteredExpenses.length > 0 &&	// 길이가 0보다 크면 map 실행	
  filteredExpenses.map((expense) => (
    <ExpenseItem
      key={expense.id} // id를 key값으로 설정
      title={expense.title}
      amount={expense.amount}
      date={expense.date}
    />
  ))}

하지만 이것보다 더 가독성 좋은 코드로 바꿀 수 있다.

변수 사용하기

let으로 선언하여 동적인 변환을 할 수있도록 하고 default 값을 p태그로 주며

길이가 0 이상일 때 map 함수를 사용하면 된다..

  let expnesesContent = <p>No expenses found.</p>;
  if (filteredExpenses.length > 0) {
    expnesesContent = filteredExpenses.map((expense) => (
      <ExpenseItem
        key={expense.id} // id를 key값으로 설정
        title={expense.title}
        amount={expense.amount}
        date={expense.date}
      />
    ));
  }

그럼 return 구문에서 JSX문법으로 변수만 입력해주면 된다.

  return (
    <div>
      <Card className="expenses">
        <ExpensesFilter
          selected={filteredYear}
          onChangeFilter={filterChageHandler}
        />
        {expnesesContent} // 변수 입력
      </Card>
    </div>
  );

---

한번 더 컴포넌트화 하기

변수로 할당된 코드를 다시 ExpensesList.js 를 만들어 컴포넌트화 하여 조금더 깔끔한 코드로 만들어준다.

import "./ExpensesList.css";

import ExpenseItem from "./ExpenseItem";
import React from "react";

const ExpensesList = (props) => {
  if (props.items.length === 0) {
    return <h2 className="expense-list__fallback">Found no expenses.</h2>;
  }

  return (
    <ul className="expeses-list">
      {props.items.map((expense) => (
        <ExpenseItem
          key={expense.id} // id를 key값으로 설정
          title={expense.title}
          amount={expense.amount}
          date={expense.date}
        />
      ))}
    </ul>
  );
};

export default ExpensesList;

# ExpensesList.js