React 기초 함수형으로 변환 230822

~44일차~

---

컴포넌트 변경

export default class ExpenseForm extends Component
	    render() {
        return (
          
// 함수형으로 변경
const ExpenseFrom = () => {
    return (

import React, { Component } from 'react' 에서도 { Component } 삭제

---

State를 useState Hook 이용해서 표현

constructor(props) {
  super(props);
  this.state = {
    expenses: [
    {id: 1, charge: '렌트비', amount: 1600},
    {id: 2, charge: '교통비', amount: 400},
    {id: 3, charge: '식비', amount: 1200},
      ]}}

//useState 이용
import React, { useState } from 'react';
//         [getter, setter]    
  const [expenses, setExpenses] = useState([
    {id: 1, charge: '렌트비', amount: 1600},
    {id: 2, charge: '교통비', amount: 400},
    {id: 3, charge: '식비', amount: 1200},
  ]);

const [value, setValue] = useState("");

value : 변수이름, getter
setValue : State를 정하는 함수, setter
useState : value, setValue를 리턴하고, 초기 State값을 정하는 Hook

*위에 적힌 코드에서는 3개의 객체가 있는 배열이 초기 State값

---

정의된 함수 및 메소드 사용 방법 변경

const handleDelete = (id) => {
    const newExpenses = expenses.filter(expense => expense.id !== id);
    setExpenses(newExpenses);
  }

// . . .
// 기존 사용하던 내용 변경

<ExpenseList       //initialExpenses는 기존 초기값 지정했던 것, useState 쓰며 사라짐
  initialExpenses={this.initialExpenses}
  handleDelete={this.hadleDelete}
/>

//함수형으로 변환 시
<ExpenseList
   expenses={expenses}
   handleDelete={handleDelete}
/>