🎨 17. Form 렌더링 최적화: 제어(Controlled) vs 비제어(Uncontrolled)

🎯 이 섹션을 읽고 나면:

• 사용자가 키보드를 칠 때마다 페이지 전체가 리렌더링되는(lagging) 성능 버그의 근본 원인을 파악한다.
• 상태(useState) 없이도 폼(Form) 요소의 값을 추출해내는 '비제어(Uncontrolled)' 기법을 체득한다.
• 왜 실무에서 react-hook-form 라이브러리를 거의 필수적으로 채택하는지 아키텍처 관점에서 이해할 수 있다.

📋 목차

• 🤔 왜 알아야 하는가: '실시간 연결'의 댓가
• 🏗️ 비유로 먼저 이해하기
• 🧩 극의 체득: 언컨트롤드(Uncontrolled) 폼 짜기
  • ✅ 방법 1: useRef로 멱살 잡기
  • ✅ 방법 2: FormData API (찐 고수들의 브라우저 네이티브 방법)
• 🌟 React Hook Form: 실무 표준 라이브러리가 된 이유

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 10분 / 핵심 파트: 5분

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 영수(PM): "영철 님, 새로 만든 [게시글 작성] 페이지 말인데요. 글을 길게 쓰면 쓸수록 키보드 타이핑이 버벅거려요. 한 글자 칠 때마다 0.5초씩 렉이 걸리네요."
• 영철(신입): "어라? 그냥 책에서 배운 대로 <input> 값들 전부 useState에 담아서 onChange 돌렸는데... 글이 길어져서 마크다운 프리뷰(미리보기) 렌더링이 무거워지니까 전체 화면 렌더링이 버티지 못하는 것 같습니다 ㅠㅠ"
• 영호(리드): "영철 님, 화면에 당장 '실시간 반응' 을 보여줘야 하는 게 아니라면, 글자를 10만 자를 치든 100만 자를 치든 리렌더링 횟수는 항상 0번 이어야 합니다. 구시대 유물인 제어(Controlled) 패턴에서 벗어나 비제어(Uncontrolled) 의 세계로 넘어갑시다."

🤔 왜 알아야 하는가: '실시간 연결'의 댓가

가장 널리 알려지고 흔하게 교육되는 React Form 제어 방식은 이렇습니다:

// ❌ 영철이의 무거운 거대 Form (제어 컴포넌트 방식)
function PostWriter() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
 
  // 🚨 한 글자 칠 때마다 이 거대한 컴포넌트가 전부 리렌더링 됨!
  console.log('렌더링 발생 웽알웽알!'); 
 
  return (
    <form>
      <input 
        value={title} 
        onChange={(e) => setTitle(e.target.value)} 
        placeholder="제목"
      />
      <textarea 
        value={content} 
        onChange={(e) => setContent(e.target.value)} 
        placeholder="내용"
      />
      <HeavyMarkdownPreview markdown={content} /> {/* 버벅임의 원흉 */}
      <button type="submit">작성 완료</button>
    </form>
  );
}

이 방식을 "제어(Controlled) 컴포넌트" 패턴이라고 부릅니다. React의 상태(useState)가 입력창(input)의 데이터 주도권을 100% 쥐고 제어하는 방식입니다.

• 장점: "비밀번호가 8자가 넘으면 버튼을 빨갛게 만든다" 라던가, "소문자 입력 시 강제로 대문자로 바꾼다" 같은 실시간 1:1 동기화 검증이 필요한 경우 무조건 제어 방식을 써야 합니다.
• 치명적 단점: 사용자가 '가나다라' 4글자를 치는 순간, 리액트 앱 전체 렌더링 사이클이 4번 돕니다. 만약 저 <form> 안에 엄청 무거운 렌더링 요소(HeavyMarkdownPreview 등)가 있다면 **키보드 입력 지연(Input Lagging)**이 터집니다.

🏗️ 비유로 먼저 이해하기

🧒 5살에게 설명한다면?

1. 제어(Controlled) 방식 (영철이): 선생님(React)이 학생(Input)이 글씨 쓰기 시험을 보는 내내 옆에 찰싹 붙어서 감시합니다. "ㄱ 썼네? ㅇㅋ. ㅏ 썼네? ㅇㅋ." 숨 쉴 틈 없이 피로도가 쌓입니다(리렌더링 무한 루프).
2. 비제어(Uncontrolled) 방식 (영호): 선생님이 교무실에서 유튜브를 봅니다. 학생이 혼자서 OMR 카드를 다 찍고, 60분 뒤에 "선생님 다 풀었어요!" 하고 제출(Submit)할 때 딱 한 번 쳐다보고 결과만 채점합니다. 선생님(React)은 시험 치는 중에 단 한 번도 움직이지 않습니다(리렌더링 0회).

우리가 회원가입 폼에 이름, 주소, 나이를 칠 때마다 실시간으로 화면의 모양이 바뀌나요? 보통은 아닙니다. 그저 마지막에 [제출 버튼]을 누르는 순간 데이터만 쓱 빼오면 그만입니다. 상태(useState)로 그 녀석들을 일일이 감시할 이유가 전혀 없는 것이죠!

🧩 극의 체득: 언컨트롤드(Uncontrolled) 폼 짜기

"상태 변수에 묶어두지 않으면 나중에 어떻게 값을 꺼내오나요?"

✅ 방법 1: useRef로 멱살 잡기

8강 useRef 비밀 창고에서 배웠듯, useRef는 렌더링을 트리거하지 않고 DOM 요소에 접근하는 뒷구멍을 열어줍니다.

function FastWriter() {
  const titleRef = useRef(null);
  const contentRef = useRef(null);
 
  const handleSubmit = (e) => {
    e.preventDefault(); // 화면 새로고침 방지
    
    // 상태 대신, 제출 버튼을 누른 그 순간! DOM에서 기습적으로 값을 빼온다.
    console.log("제출된 제목:", titleRef.current.value);
    console.log("제출된 내용:", contentRef.current.value);
  };
 
  // 🎯 글자를 아무리 쳐도 리렌더링 완전 0회!
  return (
    <form onSubmit={handleSubmit}>
      {/* value와 onChange를 지우고, ref만 박아둔다 */}
      <input ref={titleRef} placeholder="제목" />
      <textarea ref={contentRef} placeholder="내용" />
      <button type="submit">작성 완료</button>
    </form>
  );
}

✅ 방법 2: FormData API (찐 고수들의 브라우저 네이티브 방법)

사실 useRef조차도 폼 인풋 필드가 30개라면 useRef 30개를 선언해야 하므로 끔찍합니다. 더 원초적이고 강력한 브라우저 표준 DOM API인 FormData를 쓰면 마법이 일어납니다.

function NativeForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    
    // e.target은 form 태그 자체. FormData가 하위 인풋 값을 쫙 긁어 모아준다.
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData); 
    
    console.log("한 방에 추출된 30개 데이터:", data);
    // { title: "안녕", content: "방가", age: "25", ... }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      {/* 💥 ref조차 필요 없다! 오직 "name" 속성만 달아주면 끝! */}
      <input name="title" placeholder="제목" />
      <textarea name="content" placeholder="내용" />
      <input name="age" type="number" placeholder="나이" />
      <button type="submit">작성 완료</button>
    </form>
  );
}

이 방법의 아름다움: useState 0개, useRef 0개, 리렌더링 0회. 폼 최적화의 극의에 도달했습니다.

🌟 React Hook Form: 실무 표준 라이브러리가 된 이유

그러나 현실 실무는 녹록지 않습니다. "제출할 때만 에러 검사(Validation) 을 띄워주세요" 였다가, 며칠 뒤 기획자가 "아, 비밀번호가 8자 미만이면 즉각즉각 빨간 글씨로 경고해 주세요" 라고 요청을 틀어버립니다 (비제어의 한계).

즉, 대부분은 비제어(Uncontrolled)로 가볍게 움직이되, 특정 필드나 조건에서만 찰나의 순간 제어(Controlled)로 감시하고 렌더링해야 하는 하이브리드 지옥에 빠지게 됩니다.

이 모든 아키텍처 고민, 복잡한 타입스크립트 에러 추론, 제어/비제어 렌더링 최적화를 하나의 Hook(useForm) 으로 통일시켜버린 외계인 기술 라이브러리가 바로 react-hook-form (RHF) 입니다.

// 실무 RHF 맛보기 (내부적으로 거친 Uncontrolled 로직을 우아하게 추상화함)
import { useForm } from "react-hook-form";
 
function RealWorldForm() {
  // register가 내부적으로 ref와 onChange를 절묘하게 섞어 렌더링을 억제시켜줌
  const { register, handleSubmit, formState: { errors } } = useForm();
 
  const onSubmit = data => console.log(data);
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input 
        {...register("username", { required: true, maxLength: 20 })} 
      />
      {/* 에러가 발생한 그 순간에만 지능적으로 부분 리렌더링 발동! */}
      {errors.username && <span>이름을 제대로 적어주세요!</span>}
      <button type="submit">가입</button>
    </form>
  );
}

RHF 내부의 뼈대 논리가 완벽한 '비제어 기반의 지능형 제어 시스템'이기 때문에 실무 점유율 세계 1위를 수성하고 있는 것입니다.

🏁 이번에 배운 내용 총정리

🐣 영철이의 퇴근 일기

"사용자가 키보드 칠 때마다 왜 렉이 걸리지?" 하면서 마크다운 에디터 탓만 했던 내가 원망스럽다. 실시간 동기화가 필요 없는 폼 데이터까지 억지로 useState 목줄을 채워놓고 제어(Controlled)하려고 했던 게 원흉이었다니.

💡 "폼 데이터 감시에서 손을 떼자. 제출할 때 딱 한 번 낚아채는 비제어(Uncontrolled) 방식을 쓰면 키보드 버벅임(Zero Re-rendering)을 완벽하게 없앨 수 있다."

오늘 영호 님이 react-hook-form의 탄생 배경과 철학을 짚어주시니까 라이브러리가 그냥 툴이 아니라 아키텍처의 정수라는 게 뼈저리게 느껴진다. 이제 어디가서 RHF 왜 쓰냐고 물어보면 비제어 패턴 퍼포먼스 때문이라고 간지나게 대답할 수 있을 듯! 발걸음이 가벼우니 오늘 저녁은 족발에 막국수 간다!

📝 마무리 퀴즈

Q1. form 제출 관리에 있어 "비제어(Uncontrolled) 컴포넌트" 패턴을 적용하기에 가장 적절한 상황은 언제인가요?

• A) 사용자가 <input>에 신용카드 번호를 입력할 때마다 뒤의 4자리를 실시간으로 * 표 처리하여 가려 보여줘야 할 때.
• B) 회사가 요구한 30가지 인적사항을 설문조사지에 기입한 후, 마지막 하단의 "제출하기" 버튼 하나를 누르는 순간에만 값이 완성되어 API로 전송되면 될 때.
• C) 검색창에 단어를 타이핑할 때마다 엔터키 없이 아래에 즉각 검색 연관 결과 목록이 떠야 하는 경우.

✅ 정답: B

💡 상세 해설: B는 전형적인 비제어 패턴의 무대입니다. 입력 중간중간 앱이 상태 변경 사실을 몰라도 진행에 아무런 지장이 없으며, 무거운 리렌더링을 피할 수 있습니다. 반면 A나 C처럼 글자를 치는 족족 화면의 픽셀(마스킹 UI, 자동완성 목록)이 당장 바뀌어야 하는 케이스는 무조건 React가 데이터의 목줄을 쥐고 흔드는 '제어(Controlled)' 패턴을 써서 실시간 리렌더링을 일으켜야만 합니다.

Q2. 다음 중 최신 실무에서 react-hook-form이 과거 유행하던 Formik 같은 중앙 집중형 State 라이브러리를 압도하고 대세가 된 가장 치명적인 아키텍처적 이유는 무엇인가요?

• A) 컴포넌트 전체를 렌더링시키는 상태 의존도를 끊어내고, 내부적으로 Uncontrolled 방식(Ref)을 철저히 기저 원리로 사용하여 키보드 입력 시 앱 전체 UI가 정지하는 렉(Lag)을 없앴기 때문.
• B) 비동기 데이터를 Fetch 해올 때, Next.js의 use client 선언을 무시하고 서버사이드 렌더링을 가능하게 만들어주기 때문.
• C) 컴포넌트 상태(State)를 강제로 브라우저 LocalStorage에 직렬화하는 백업 기능이 내장되어 있기 때문.

✅ 정답: A

💡 상세 해설: 정확합니다. react-hook-form의 가장 큰 자부심은 이 문서에서 배운 "비제어(Uncontrolled) 컴포넌트" 철학입니다. 이를 통해 렌더링 퍼포먼스를 극대화하였고, 에러 메시지 표출 같은 꼭 필요한 곳에서만 '격리된 렌더링'을 일으키는 압도적인 기술력을 보여주었기에 현대 프론트엔드의 대관식을 치르게 된 것입니다.