State 저장 목록 사용

Add Expense를 해서 데이터를 App까지 끌어올리는 것을 지금까지 해놨고, 이제 새로 추가된 데이터를 기존 배열에 넣는 걸 할 거다.

강의를 듣기 전에 내가 냅다 만들었던 코드는 아래와 같다.

const [expenses, setExpenses] = useState(DUMMY_EXPENSES); 
//배열 이름을 DUMMY_EXPENSES로 변경하고 APP 밖에 위치시켜놨다.

  const addExpenseData = (expense) => {
    setExpenses([expense, ...expenses ]);
    console.log(expenses);
  };

내가 딱 만들자마자 강사님이 이거랑 똑같이 만드시더니
이런 식으로 state를 업데이트 하는 건 지금 적절한 방법이 아니다~라고 하셨다
파하하하

그래서 강의를 들으며 수정해보았따.

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

  const addExpenseData = (expense) => {
    setExpenses((prevExpenses)=>{
    	return [expense, ...prevExpenses]
    });
    console.log(expenses);
  };

이 코드가 동일한 상태의 이전 스냅샷을 기반으로 하는 경우에 state를 업데이트할 수 있는 깔끔한 방법이다.