제어 컴포넌트와 비제어 컴포넌트의 차이는 무엇인가요?

제어 컴포넌트는 입력값을 React state로 관리하고, 비제어 컴포넌트는 DOM이 값을 관리하며 ref로 읽습니다. 복잡한 검증과 조건부 UI에는 제어 방식이 더 예측 가능합니다.

핵심 개념

핵심 기준은 폼 값의 소스가 React인지 DOM인지입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.

React에서는 상태 변화가 렌더링으로 이어지는 흐름을 예측 가능하게 만드는 것이 중요합니다. 컴포넌트 경계와 렌더링 비용을 이해하면 더 부드러운 UI를 만들 수 있습니다.

동작 흐름

1. 먼저 어떤 문제가 있는지 확인합니다.
2. 이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
3. 실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
4. 마지막으로 한계와 부작용을 함께 점검합니다.

실제 예시

function ProfileForm() {
  const [name, setName] = useState("");

  return <input value={name} onChange={(e) => setName(e.target.value)} />;
}

제어 컴포넌트는 입력값의 원천을 React state로 둡니다. 검증과 조건부 UI를 만들기 쉽습니다.

실무에서 주의할 점

• 상태를 너무 위로 올리면 불필요한 렌더링 범위가 커집니다.
• memoization은 병목이 확인된 곳에 쓰는 편이 좋습니다.
• 사용자 입력, 로딩, 에러 상태를 함께 설계해야 실제 화면이 안정적입니다.

함께 연결해서 보면 좋은 키워드

React, Form, Controlled, Uncontrolled

정리

한 줄로 정리하면, 제어 컴포넌트는 입력값을 React state로 관리하고, 비제어 컴포넌트는 DOM이 값을 관리하며 ref로 읽습니다. 복잡한 검증과 조건부 UI에는 제어 방식이 더 예측 가능합니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

제어/비제어 컴포넌트의 선택

제어 컴포넌트는 입력값을 React state로 관리하고, 비제어 컴포넌트는 DOM의 내부 상태를 ref로 필요할 때 읽습니다.

// 제어
<input value={keyword} onChange={(e) => setKeyword(e.target.value)} />

// 비제어
<input ref={inputRef} defaultValue="" />

제어 컴포넌트가 좋은 경우

• 입력 중 즉시 검증 메시지를 보여줘야 함
• 다른 UI 상태가 입력값에 의존함
• 입력값을 포맷팅하거나 마스킹해야 함

비제어 컴포넌트가 좋은 경우

• 값이 제출 시점에만 필요함
• 파일 입력처럼 브라우저 제약이 강함
• 대형 폼에서 렌더링 비용을 줄이고 싶음

React에서는 한 input을 중간에 제어에서 비제어로 바꾸거나 반대로 바꾸지 않는 것이 중요합니다. undefined 값이 value로 들어가면 의도치 않은 전환 경고가 날 수 있습니다.