📝 9. HTML `form` 태그와 React에서 Controlled vs Uncontrolled 폼 제대로 구분해봤다

---

HTML의 기본 구조에서 form 태그는 너무 익숙하지만,
React로 폼을 만들기 시작하면 Controlled와 Uncontrolled의 개념이 생기면서 혼란이 시작된다.
이번 글에서는 기본 개념부터 React의 입력 상태 관리 방식까지 전부 정리해봤다.

---

✅ HTML에서의 기본 form

<form action="/submit" method="POST">
  <label>
    이름: <input type="text" name="username" />
  </label>
  <button type="submit">제출</button>
</form>

주요 속성

• action: 데이터를 전송할 URL
• method: 전송 방식 (GET, POST, etc.)
• name: 서버로 전송될 key
• onSubmit: 자바스크립트 이벤트 핸들러로 대체 가능

---

✅ React에서의 Form은 상태관리 방식에 따라 나뉜다

React에서는 보통 onChange로 값을 받아 상태를 관리하게 되는데,
이때 상태와 input이 연결되어 있는지 여부에 따라 2가지로 나뉜다.

---

🔹 Controlled Form

상태(useState)로 입력값을 관리하며, value와 onChange가 바인딩됨

const [name, setName] = useState('');

return (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
    <button type="submit">제출</button>
  </form>
);

장점

• React에서 모든 상태를 추적 가능
• 유효성 검사(validation)과 조건부 렌더링이 쉬움

단점

• 입력값마다 렌더링이 일어나므로 많아지면 성능에 영향
• boilerplate 코드가 많아짐

---

🔹 Uncontrolled Form

상태를 따로 관리하지 않고, DOM을 직접 참조하여 값을 가져옴

const inputRef = useRef();

const handleSubmit = (e) => {
  e.preventDefault();
  console.log(inputRef.current.value);
};

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

장점

• 퍼포먼스에 좋고 코드가 간결함
• 입력창이 많을 때 부담이 적음

단점

• 상태 추적이 어려움
• validation이나 제어가 까다로움

---

✅ 언제 어떤 걸 써야 할까?

상황	추천 방식
입력값을 제어해야 함 (유효성검사 등)	Controlled
단순 입력만 받고 제출할 경우	Uncontrolled
외부 라이브러리(Formik, React Hook Form 등) 사용	둘 다 내부적으로 사용 가능

---

📝 내가 느낀 점

처음에는 무조건 Controlled 방식으로만 폼을 구현했는데,
생각보다 input이 많아지면 코드도 복잡해지고 리렌더링도 많아지는 걸 느꼈다.
특히 useRef를 쓰면 성능 최적화나 간단한 입력 처리에 꽤 유용하다는 걸 알게 됐다.

---

🧠 “폼은 단순해 보여도 복잡한 인터랙션이 많다. 상태를 제어할지 말지를 먼저 고민하자.”