React에서 체크박스를 포함한 다중 입력 폼 구현하기

 

예제 코드

import React, { useState } from "react";

function MultiInputForm() {
  // 초기 상태 설정
  const [formData, setFormData] = useState({
    username: "",
    email: "",
    agreeToTerms: false, // 체크박스 상태
  });

  // 입력 값 변경 핸들러
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target; // e.target에서 필요한 값 추출

    setFormData({
      ...formData, // 기존 값 복사
      [name]: type === "checkbox" ? checked : value, // 체크박스는 checked, 나머지는 value
    });
  };

  // 폼 제출 핸들러
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("폼 데이터 제출:", formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 텍스트 입력 */}
      <div>
        <label>
          사용자명:
          <input
            type="text"
            name="username"
            value={formData.username}
            onChange={handleChange}
          />
        </label>
      </div>

      <div>
        <label>
          이메일:
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
          />
        </label>
      </div>

      {/* 체크박스 입력 */}
      <div>
        <label>
          이용 약관에 동의:
          <input
            type="checkbox"
            name="agreeToTerms"
            checked={formData.agreeToTerms}
            onChange={handleChange}
          />
        </label>
      </div>

      {/* 제출 버튼 */}
      <button type="submit">제출</button>
    </form>
  );
}

export default MultiInputForm;

 

---

 

코드 설명

1. 초기 상태(useState)

const [formData, setFormData] = useState({
  username: "",
  email: "",
  agreeToTerms: false,
});

• 상태 객체 formData는 폼의 모든 입력값을 관리한다.
• username과 email은 텍스트 필드 값.
• agreeToTerms는 체크박스의 체크 여부

2. 입력 핸들러 (handleChange)

const handleChange = (e) => {
  const { name, value, type, checked } = e.target;

  setFormData({
    ...formData, // 기존 상태 복사
    [name]: type === "checkbox" ? checked : value, // 체크박스는 checked, 나머지는 value
  });
};

 

e.target 정보 추출

• name :  입력 필드의 name 속성(예: username, agreToTerms) - 입력 필드의 name 속성에 따라 객체의 키가 동적으로 정해짐
• value : 텍스트 입력 필드의 현재 값
• type: 입력 유형(text, checkbox 등)
• checked :  체크박스의 체크 여부(true 또는 false)

업데이트 로직

• type === "checkbox" 인 경우, 체크 여부(checked)를 상태에 저장
• 그 외의 경우, 입력 값(value)을 상태에 저장

3. 폼 제출 핸들러(handleSubmit)

const handleSubmit = (e) => {
  e.preventDefault(); // 폼의 기본 동작(새로고침) 방지
  console.log("폼 데이터 제출:", formData); // 최종 데이터를 콘솔에 출력
};

 

최종적으로 formData 객체를 서버로 전송하거나 다른 로직에 활용

 

---

결과

1. 사용자명이 변경되면 formData.username 업데이트
2. 이메일이 입력되면 formData.email 업데이트
3. 체크박스가 선택되거나 해제되면 formData.agreeToTerms업데이트
4. 제출 버튼 클릭 시, 현재 상태의 formData를 콘솔에 출력

---

실행 화면

1. 입력 필드에 텍스트를 입력하면 즉시 상태가 반영
2. 체크박스를 선택하거나 해제해도 상태가 즉시 업데이트된다.
3. 제출 버튼을 누르면 현재 상태를 확인할 수 있다.