React : Form 데이터 조작 방법

Form Input

※ Form 데이터를 useState로 관리해줘야 하는 이유
- useState로 React에서 해당 상태를 관리할 수 있도록 해주지 않을 경우 사용자의 인터렉션으로 인한 input의 상태값이 바뀌더라도 리렌더링이 일어나지 않을수도 있다.

※ 예시 코드

import React, { useState } from "react";
import styles from "./Form.module.css";

export default function Form() {
  const [form, setForm] = useState({
    id: "",
    password: "",
    passwordCheck: "",
    name: "",
  });

  const handleForm = (e) => {
    const value = e.target.value;
    const name = e.target.name;

    setForm({ ...form, [name]: value });
  };

  return (
    <form className={styles.form}>
      <div>
        <label htmlFor="id">아이디 : </label>
        <input type="text" id="id" name="id" value={form.id} onChange={handleForm} />
      </div>
      <div>
        <label htmlFor="password">비밀번호 : </label>
        <input
          type="password"
          id="password"
          name="password"
          value={form.password}
          onChange={handleForm}
          autoComplete="on"
        />
      </div>
      <div>
        <label htmlFor="passwordCheck">비밀번호 확인 : </label>
        <input
          type="password"
          id="passwordCheck"
          name="passwordCheck"
          value={form.passwordCheck}
          onChange={handleForm}
          autoComplete="on"
        />
      </div>
      <div>
        <label htmlFor="name">이름 : </label>
        <input type="text" id="name" name="name" value={form.name} onChange={handleForm} />
      </div>

      <button type="submit">회원가입</button>
    </form>
  );
}

※ Form 입력 테스트

※ React Developer Tools에서 확인