리액트 파생 상태

같은 소스에 기반하고 있는 상태(state)가 여러개라면 하나로 줄일 수 있는 방법이 있다.

설정하는 상태(state)가 다른 상태(state)와 직접적으로 연결되어 있다면
별도의 상태(state)로 관리하는 것은 좋지 않다.

import React, { useState } from 'react';

import ExpenseItem from './ExpenseItem';
import Card from '../UI/Card';
import ExpensesFilter from './ExpensesFilter';
import './Expenses.css';

const Expenses = (props) => {
  const [filteredYear, setFilteredYear] = useState('2020');
  
  // 변수를 선언하여 별도의 상태관리를 하지 않고 기존의 변수를 사용하여 텍스트를 만든다.
  let filterInfoText = "2019 2021 2022"
  
  if (filteredYear === "2019") {
      	filterInfoText = "2020 2021 2022"
  } else if (filteredYear === "2021") {
    	filterInfoText = "2019 2020 2022"
  } else {
    	filterInfoText = "2019 2020 2021"
  }

  const filterChangeHandler = selectedYear => {
    setFilteredYear(selectedYear);
  };

  return (
    <div>
      <Card className='expenses'>
        <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler} />
        // filteredYear 이 변하면 Expenses 함수 자체가 리렌더링 되기 때문에 filterInfoText변수도 최신 값으로 재평가되어 업데이트 된다.
        <p>{filterInfoText}</p>
        <ExpenseItem
          title={props.items[0].title}
          amount={props.items[0].amount}
          date={props.items[0].date}
        />
        <ExpenseItem
          title={props.items[1].title}
          amount={props.items[1].amount}
          date={props.items[1].date}
        />
        <ExpenseItem
          title={props.items[2].title}
          amount={props.items[2].amount}
          date={props.items[2].date}
        />
        <ExpenseItem
          title={props.items[3].title}
          amount={props.items[3].amount}
          date={props.items[3].date}
        />
      </Card>
    </div>
  );
};