Controlled Component와 Uncontrolled Component

이재민·2025년 6월 27일

리액트

목록 보기

2/2

React에서는 input, textarea, select 같은 폼 요소를 사용할 때 두 가지 방식 중 하나로 데이터를 다룰 수 있습니다.

바로 Controlled Component(제어 컴포넌트) 와 Uncontrolled Component(비제어 컴포넌트) 입니다.

Controlled Component란?

입력값의 상태(state)를 React가 직접 관리하는 컴포넌트를 의미합니다.

입력값은 컴포넌트의 상태에 저장되고, 사용자의 입력은 이벤트 핸들러를 통해 상태를 업데이트합니다.

ex)

function ControlledInput() {
  const [value, setValue] = React.useState('');

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

완전한 React 기반 데이터 흐름
- 입력값을 상태(state)로 저장하여 언제든지 읽고, 수정하고, 검증할 수 있습니다.
실시간 유효성 검사/자동완성/조건부 렌더링 등에 적합
- 예: 이메일 입력이 완료되면 자동으로 확인 메시지 출력 등
장점: 상태 관리가 명확하고 테스트 용이
단점: 입력에 대해 상태 갱신 → 성능 부하 발생 가능 (대량 필드일 경우 최적화 필요)

Uncontrolled Component란?

DOM 자체에서 값을 직접 관리하는 컴포넌트를 의미합니다.

입력값을 React state로 제어하지 않고, ref를 통해 DOM에 직접 접근하여 값을 읽거나 설정합니다.

ex)

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

  const handleClick = () => {
    alert(inputRef.current.value);
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>입력값 보기</button>
    </>
  );
}

React는 구조만 잡고 값은 DOM에게 위임
- HTML 태그처럼 브라우저가 기본 동작을 처리
간단한 폼, 외부 위젯, 파일 업로드 등에 적합
ref를 통해 값에 접근하거나 초기값 설정만 하고 이후는 방치
장점: 성능 부담 적고 코드 간결
단점: 유효성 검사가 어려움, React 상태와 비동기 동작이 어긋날 수 있음

특징 비교 표

항목	Controlled Component	Uncontrolled Component
값의 저장 위치	React의 state로 저장	DOM 요소의 내부 값 (input.value)
상태 제어 주체	React가 직접 제어	브라우저(DOM)가 제어
초기값 설정	useState로 초기값 설정	defaultValue, defaultChecked 사용
값 변경 방법	onChange로 상태 업데이트	DOM을 통해 직접 변경되며 React는 관여하지 않음
값 접근 방법	상태 변수 (value)로 바로 접근 가능	ref.current.value로 DOM에 접근해야 함
입력값 동기화	항상 React 상태와 UI가 동기화	React와 입력값이 동기화되지 않음 (비일관성 가능성 존재)
데이터 흐름 추적	명확하고 예측 가능함 (단방향)	외부 변화가 React에 의해 추적되지 않음
디버깅	상태를 통해 언제든지 추적 가능	ref 접근 없이 값 추적 어려움
코드 양	상대적으로 많아질 수 있음	간단한 로직은 짧게 끝남
성능	입력마다 re-render 발생 (최적화 필요 시 useMemo 등 필요)	입력은 DOM이 처리 → 더 가볍지만 추적 불가

언제 Controlled를 쓰고, 언제 Uncontrolled를 쓸까?

Controlled Component가 적합한 경우

입력값을 즉시 검증해야 할 때 (e.g., 이메일 형식 검사)
여러 입력 요소를 조합해 상태를 하나로 관리할 때
입력값을 기반으로 동적으로 UI를 변경할 때

Uncontrolled Component가 적합한 경우

값이 굳이 React의 상태로 필요 없는 간단한 입력일 때
외부 라이브러리나 포커스 제어 등 DOM 직접 접근이 필요할 때
성능상 오버헤드를 줄이고 싶을 때 (예: 파일 업로드 등)

결론

Controlled Component는 데이터 흐름 관리와 유효성 검사가 중요한 경우에 유용하며, Uncontrolled Component는 단순한 폼이나 성능 최적화가 필요한 경우에 유용합니다. 상황에 따라 적절한 방식을 선택하여 사용되나, 개인적으로 성능이 정말 중요한 기능이 아니라면 state로 입력값을 관리하여 상태의 흐름을 제어하는 것이 좋을 것 같다.

예상 면접 질문