57. 여러 State 다루기

우리의 목표는 여기서 form 태그에 입력된 값들이 submit 했을 때 사용할 수 있도록 하는 것이다

값을 저장해서 살릴 수 있는 방법은 ?

컴포넌트 함수의 수명 주기와는 별개인 어떤 변수에 저장하고 있는 것을 확실하게 하기 위해서 
setEnteredTitle에 저장 

 

ExpenseForm.js

import React, { useState } from "react";
import "./ExpenseForm.css";
const ExpenseForm = () => {
  // const [content, setContent/] = useState({});
  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 htmlFor="">Title</label>
        <input type="text" onChange={titleChangeHandler} />
      </div>
      <div className="new-expense__control">
        <label htmlFor="">Amount</label>
        <input type="number" min="0.01" step="0.01 " onChange={amountChangeHandler} />
      </div>
      <div className="new-expense__control">
        <label htmlFor="">Date</label>
        <input type="date" min="2021-01-01" max="2023-12-31" onChange={dateChangeHandler} />
      </div>
      <div className="new-expense__actions">
        <button type="submit">Add Expense</button>
      </div>
    </div>
  </form>
}

export default ExpenseForm;

 

event.target.value로 읽게 되는 값들은 숫자를 입력한다 하더라도 모두 String 형태가 된다

그래서 useState에서도 ('') 빈 문자열을 초기값으로 설정하면 된다

 컴포넌트에서 하나 이상의 state를 갖는 경우를 많이 접하게 될 것이다
별도의 상태를 갖고 각각 업데이트하도록 관리할 수 있다

이것이 리액트에서 제공하는 state에 관한 핵심적인 부분이다

 

다음 시간에는 컴포넌트에서 하나의 상태state를 갖는 것과 여러 개를 갖는 것을 비교해보자