React useState로 다중 입력 폼 : onChange 핸들러 활용

 

리액트에서 하나의 컴포넌트 안에 여러 개의 입력 필드를 다루는 방법은 제어 컴포넌트(Control Components)와 상태(State)를 사용하는 것이다. 각각의 입력 필드 값을 독립적으로 관리하면서 하나의 onChange이벤트 핸들러를 통해 처리할 수 있다.

---

 

사용예제

import React, { useState } from 'react';

function MultiInputForm() {
  // 상태를 객체 형태로 관리
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

  // 입력값 변경 시 호출되는 함수 (공통 핸들러)
  const handleChange = (e) => {
    const { name, value } = e.target; // name과 value 가져오기
    setFormData({
      ...formData, // 기존 값 복사
      [name]: value // name에 해당하는 필드 업데이트
    });
  };

  // 폼 제출 처리
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('제출된 데이터:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>사용자 이름:</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>이메일:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>비밀번호:</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </div>
      <button type="submit">제출</button>
    </form>
  );
}

export default MultiInputForm;

 

코드 설명

1. 상태 초기화

const [formData, setFormData] = useState({
  username: '',
  email: '',
  password: ''
});

formData는 여러 필드의 값을 저장하는 객체이다.

 

2. onChange 이벤트 핸들러

const handleChange = (e) => {
  const { name, value } = e.target;
  setFormData({
    ...formData,
    [name]: value
  });
};

 

• const handlechange = (e) => {...} : 입력 필드의 값이 변경되면 handleChange 이벤트 핸들러가 호출된다.
• e.target : 이벤트가 발생한 DOM 요소 여기서는 input (name, value, id 등을 포함하는 개체)
• {name, value} : name과 value 속성만 뽑아 구조 분해 할당
• ...formData : 기존 formData 상태를 복사한다. (전개 연산자)
• [name] : value : computed Property Name 문법을 사용하여 name 속성의 값을 동적으로 업데이트
• 기존 formData에 새로운 값을 변합한다.
• setFormData() : React의 상태 업데이트 함수, 최종적으로 업데이트 된 formData 객체를 React 상태로 설정한다.

 

3. 입력 필드의 연결:

• 각 입력 필드가 상태와 연결되어 있다.(value={formData.username} 등)
• onChange로 모든 입력 필드의 변경사항을 처리

4. 폼 제출 처리:

const handleSubmit = (e) => {
  e.preventDefault(); // 페이지 리로드 방지
  console.log('제출된 데이터:', formData);
};

 

console.log를 통해 입력한 데이터를 확인할 수 있다.

---

 

실행 흐름

1. 사용자가 <input> 필드에 값을 입력한다.
2. onChange 이벤트가 발생하여 handleChange 함수가 호출된다.
3. e.target에서 입력 필드의 name과 value를 추출한다.
4. 기존의 formData 상태를 복사하고, 변경된 필드(name:value)를 업데이트 한다.
5. React의 상태(formData)가 업데이트되고 컴포넌트가 다시 렌더링된다.

---

입력 흐름 시뮬레이션

1. 사용자가 username 필드에 John입력

• e.target.name = "username"
• e.target.value = "John"
• 업데이트 후 : formData = {username: "John", email:""}

2. 사용자가 email 필드에 "john@example.com" 입력:

• e.target.name = "email"
• e.target.value = " john@example.com "
• 업데이트 후 : formData = {username: "John", email: "john@example.com" }