[React] 조건에 따라 배열 렌더링하기

연도에 따라 소비 내역을 보여주는 예제를 제작하고자 합니다. state를 사용할 필요 없이 아주 간단하게 코드 몇 줄로 구현이 가능합니다.

고치기 전

return (
    <div>
      <Card className="expenses">
        <ExpenseFilter
          selected={filteredYear}
          onChangeFilter={yearChangeHandler}
        />
        {props.items.map((expense) => (
          <ExpenseItem
            key={expense.id}
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
          />
        ))}
        {/* 객체 렌더링, 배열로 변환 */}
      </Card>
    </div>
  );

원래의 코드입니다. map 메소드를 통해 받은 객체를 새로운 컴포넌트에 사용해 결과를 반복적으로 출력하는 방식입니다.

고친 후

const filteredExpenses = props.items.filter((expense) => {
    return expense.date.getFullYear().toString() === filteredYear;
  }); // 필터 내장 메소드

  return (
    <div>
      <Card className="expenses">
        <ExpenseFilter
          selected={filteredYear}
          onChangeFilter={yearChangeHandler}
        />
        {filteredExpenses.map((expense) => (
          <ExpenseItem
            key={expense.id}
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
          />
        ))}
        {/* 객체 렌더링, 배열로 변환 */}
      </Card>
    </div>
  );

JSX를 리턴하기 전에 위에 상수 하나를 추가해주었습니다. props를 통해 받은 소비 내역 객체 하나를 filter 메소드를 통해 expense 객체에서 연도를 구하고, 필터에서 선택된 연도와 같다면 True를 반환하는 함수를 실행시켜 True로 반환되는 객체들은 filteredExpenses에 새로운 배열로 저장하는 방식입니다.