70. State 저장 목록 사용

App.js 에 있는 expenses 배열 변수에 값을 추가해야 한다.

 

그리고 우리가 이미 알다시피 변수만 바꾸는 것은 화면 상의 데이터를 변경하지 않기 때문에

useState 를 사용해야 한다.

setState와 관련된 에러에 멈췄다

prev 이전 함수들과 섞는 과정에서 문제가 있는데 왜 이렇게 결과가 나왔는지 몰라서 헤매고 있다..

import { useState } from 'react';
import './App.css';
import Expenses from './components/Expenses/Expenses';
import NewExpense from './components/NewExpense/NewExpense';

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

const App = () => {
  const [expenses, setExpense] = useState([]);

  const addExpenseHandler = (expense) => {
    // setExpense([expense]);
    setExpense((prev) => {
      return [expense, ...prev];
    })
  }

  return (
    <div className="App">
      <NewExpense onAddExpense={addExpenseHandler} />
      <Expenses items={expenses} />
    </div>
  );
}

export default App;