리액트에서 텍스트 입력 폼

 

리액트에서 폼(Form)은 사용자로부터 입력을 받아 데이터를 처리하기 위한 HTML 요소들을 포함한 컴포넌트이다.

기본적으로 HTML의 <form>, <input>, <textarea>, <select> 등의 요소를 사용하며, 리액트에서는 폼 요소의 상태를 React state와 연결하여 관리하는 방식으로 동작

---

 

1. 리액트 폼의 특징

• 상태 기반 관리 : 폼의 입력 값을 리액트의 상태(state)로 관리한다.
• 제어 컴포넌트(Controlled Component) : 폼 요소의 값(value)이 컴포넌트 상태에 의해 제어된다.
• 비제어 컴포넌트(Uncontrolled Component) : 리액트 상태가 아닌 DOM 요소 자체의 상태를 직접 참조한다.
• 이벤트 처리 : onchange, onSubmint 등의 이벤트 핸들러를 통해 사용자의 입력을 처리한다.

---

 

2. 제어 컴포넌트(Controlled Component)

제어 컴포넌트는 폼 요소의 값이 리액트의 state를 통해 관리되는 폼 요소이다.

import React, { useState } from "react";

function ControlledForm() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault(); // 폼의 기본 동작(새로고침)을 막음
    alert(`입력된 값: ${inputValue}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" value={inputValue} onChange={handleChange} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

export default ControlledForm;

 

---

 

3. 비제어 컴포넌트

비제어 컴포넌트는 폼 요소의 상태를 관리하지 않고, DOM 참조(Ref)를 통해 직접 값을 가져온다.

import React, { useRef } from "react";

function UncontrolledForm() {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`입력된 값: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

export default UncontrolledForm;

 

입력 값이 리액트 상태와 연결되지 않고, DOM의 참조를 통해 값을 가져온다.

간단한 작업에서 비제어 컴포넌트가 편리하지만 폼 요소가 많아질 경우 관리가 어려워질 수 있다.

 

---

 

4. 폼 제출 이벤트 처리

onSubmit 이벤트를 통해 폼의 데이터를 처리 할 수 있다.

폼 제출 시 기본적으로 페이지가 새로고침되는데 리액트에서는 이를 막고 필요한 동작만 수행한다.

function FormWithSubmit() {
  const handleSubmit = (event) => {
    event.preventDefault();
    alert("폼이 제출되었습니다!");
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}