Forms

HTML의 Form & React의 Form

HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 DOM 엘리먼트와 다르게 동작합니다.

예를 들어, 순수한 HTML에서 다음 코드는 name을 입력받습니다.

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

이 폼은 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행합니다.

React에서는 JavaScript 코드에서 사용자의 입력 값에 접근하고 제어할 수 있어야 개발할 때 좀 더 편리합니다.

이를 위한 표준 방식을 제어 컴포넌트 (Controlled Component)라고 합니다.

---

제어 컴포넌트 Controlled Component

제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다.

React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 됩니다.

제어 컴포넌트는 값이 React의 통제를 받는 input Form Element라고 할 수 있습니다.

• 간단 예제

  import { useState } from "react";
  
  const App = () => {
    const [name, setName] = useState("");
  
    const handleSubmit = (e) => {
      alert(`Your name is ${name}`);
      e.preventDefault();
    };
  
    const handleChange = (e) => {
      setName(e.target.value);
    };
  
    return (
      <form onSubmit={handleSubmit}>
        <input type="text" value={name} onChange={handleChange} />
        <button>Add</button>
      </form>
    );
  };
  
  export default App;
  

---

비제어 컴포넌트 Uncontrolled Component

비제어 컴포넌트(Uncontrolled Component)는 ref를 통해서 form에 접근하는데 기존의 Vanilla JS와 유사합니다.

Vanilla JS에서는 input값을 입력하고 button을 클릭하여 form을 제출할 때 값을 얻어왔습니다.

이와 유사한 방식으로 비제어 컴포넌트(Uncontrolled Component)도 form을 제출할 때 실행되는 함수 내에서 ref를 통해 값을 얻어올 수 있습니다.

import { useRef } from "react";

const App = () => {
  const inputRef = useRef();

  const handleSubmit = () => {
    const name = inputRef.current.value;
    alert(`Your name is ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Enter Name" ref={inputRef} />
      <button>Add</button>
    </form>
  );
};

export default App;

---

제어 컴포넌트(Controlled Component)는 UI의 입력한 데이터 상태(사용자에게 보여지는 화면)와 저장한 데이터의 상태가 항상 일치합니다.

이 말은 사용자가 입력할 때마다 재렌더링되고 있다는 것입니다.

즉, 실시간으로 값이 필요할 때는 제어 컴포넌트(Controlled Component)를 사용하고, 불필요한 재렌더링을 줄이고 제출 시에만 값이 필요할 때는 비제어 컴포넌트(UnControlled Component)를 사용하는 것이 좋을 것 같습니다.