State 저장 목록 사용

새로운 항목이 추가 될 때마다 expense배열을 어떻게 업데이트 할 수 있을까요?

NewExpense는 onAddExpense라는 메소드에 addExpenseHandler라는 함수를 포인터로 가르키고 있습니다.

ExpenseForm에서 서브밋 될때마다 함수 실행 -> NewExpense -> App.js로 오므로 새로운 데이터가 들어올 때마다 addExnepnseHandler 함수가 실행됩니다.

  const addExpenseHandler = (expense)=>{
    console.log('App.js');
    console.log(expense);
  }

따라서 저희는 해당 expense배열을

const expenses = [
    {
      id: 'e1',
      title: 'Toilet Paper',
      amount: 94.12,
      date: new Date(2020, 7, 14),
    },
    { id: 'e2', title: 'New TV', amount: 799.49, date: new Date(2021, 2, 12) },
    {
      id: 'e3',
      title: 'Car Insurance',
      amount: 294.67,
      date: new Date(2021, 2, 28),
    },
    {
      id: 'e4',
      title: 'New Desk (Wooden)',
      amount: 450,
      date: new Date(2021, 5, 12),
    },
  ];

expenses 객체에 추가하면 됩니다.

이 방법은 state를 이용하면 됩니다.

const INITIAL_EXPENSES = [
  {
    id: 'e1',
    title: 'Toilet Paper',
    amount: 94.12,
    date: new Date(2020, 7, 14),
  },
  { id: 'e2', title: 'New TV', amount: 799.49, date: new Date(2021, 2, 12) },
  {
    id: 'e3',
    title: 'Car Insurance',
    amount: 294.67,
    date: new Date(2021, 2, 28),
  },
  {
    id: 'e4',
    title: 'New Desk (Wooden)',
    amount: 450,
    date: new Date(2021, 5, 12),
  },
];

일단 기존 배열을 함수 바깥으로 빼서 전역변수로 INITIAL_EXPENSES로 초기화상수를 만들어주겠습니다.

const [expenses,setExpenses] = useState(INITIAL_EXPENSES);

이후 expenses에 state를 걸어주며 초기값을 기존 배열로 설정해줍니다.

const addExpenseHandler = (expense)=>{
    setExpenses(prevExpenses =>{
      return [expense,...prevExpenses]
    });
  }

이후 최신의 스냅샷을 얻기 위해 위와 같은 방법으로 상태를 업데이트 해줍니다.