여러 State 다루기!!

-ExpenseForm.js

import React, { useState } from "react"
import './ExpenseForm.css'
function ExpenseForm() {
    const [enteredTitle, setEnteredTitle] = useState('');
    const [enteredAmount, setEnteredAmount] = useState('');
    const [enteredDate, setEnteredDate] = useState('');


    const titleChangeHandler = (event) => {
        setEnteredTitle(event.target.value);
    };

    const amountChangeHandler = (event) => {
        setEnteredAmount(event.target.value);
    };

    const dateChangeHandler = (event) => {
        setEnteredDate(event.target.value);
    };

    return (
        <form>
            <div className="new-expense__controls">
                <div className="new-expense__control">
                    <label>Title</label>
                    <input type='text' onChange={titleChangeHandler} />
                </div>
                <div className="new-expense__control">
                    <label>Amount</label>
                    <input type='number' onChange={amountChangeHandler} min="0.01" step="0.01" />
                </div>
                <div className="new-expense__control">
                    <label>Date</label>
                    <input type='date' min="2019-01-01" max="2022-12-31" onChange={dateChangeHandler} />
                </div>
            </div>
            <div className="new-expense__actions">
                <button type="submit">Add Expense</button>
            </div>
        </form>
    )
}
export default ExpenseForm;

 

    const [enteredTitle, setEnteredTitle] = useState('');

    const [enteredAmount, setEnteredAmount] = useState('');

    const [enteredDate, setEnteredDate] = useState('');

    const titleChangeHandler = (event) => {

        setEnteredTitle(event.target.value);

    };

    const amountChangeHandler = (event) => {

        setEnteredAmount(event.target.value);

    };

    const dateChangeHandler = (event) => {

        setEnteredDate(event.target.value);

    };

3개의 state를 받아서 변화가 일어나면 해당값을 setEtered0000에 전달후

값이 변경되면 다시 함수를  실행시켜 그 값을 업데이트 해준다!

 

1개의 state를 사용하는것과 다수의 state를 사용하는것은 크게 차이 나지 않고 똑같이 적용해주면 된다.