Controlled Component vs Uncontrolled Component 차이

Hushed_Mind·2025년 4월 2일

React 프론트엔드

React

목록 보기

4/7

Controlled Component vs Uncontrolled Component

React에서는 <input>, <textarea> 등의 폼 요소를 사용할 때
입력 값을 어떻게 관리하느냐에 따라 두 가지 방식으로 나뉜다:

Controlled Component (제어 컴포넌트)
Uncontrolled Component (비제어 컴포넌트)

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

React의 state를 통해 입력 값을 관리하는 방식

입력 요소의 value 속성을 상태값과 동기화
사용자가 입력할 때마다 onChange로 상태를 업데이트
모든 입력 데이터를 React가 완전히 제어함

장점

실시간 입력 값 검증
입력 값 초기화 및 제어 쉬움
여러 입력 간 상호작용 로직 구현 유리

코드 예시

import { useState } from 'react';

function ControlledInput() {
  const [text, setText] = useState('');

  const handleChange = (e) => setText(e.target.value);

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>입력한 값: {text}</p>
    </div>
  );
}

2. Uncontrolled Component (비제어 컴포넌트)

입력 값이 DOM 자체에 저장되고, React가 직접 제어하지 않는 방식

useRef를 통해 DOM에 접근
React의 상태 업데이트가 필요 없음
값은 필요할 때 직접 DOM에서 읽음

장점

불필요한 렌더링이 없음
단순한 폼 처리에 적합
성능상 유리 (특히 대규모 폼에서)

코드 예시

import { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

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

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

상황에 따른 선택 기준

상황	추천 방식
실시간 유효성 검사 필요	Controlled Component
폼 데이터를 서버에 제출만 하면 됨	Uncontrolled Component
복잡한 폼 로직 (다중 입력/조건부 렌더링 등)	Controlled Component
간단한 입력 필드 또는 빠른 성능이 필요한 경우	Uncontrolled Component