[매일메일] React의 Controlled Component와 Uncontrolled Component의 차이점? (FE.241220)

	Controlled Component	Uncontrolled Component
정의	React state(상태)로 입력값을 제어함	DOM 자체가 입력값을 제어함
입력값 관리	value(입력 요소 값)을 React state와 동기화 onChange로 사용자 입력 시 state 업데이트. 상태와 ui가 동기화됨. 예측 가능성 높음.	value(입력 요소 값)은 DOM에서 직접 관리함. React는 관여하지 않음. 간단한 입력 폼이나 초기값 설정 및 DOM 접근에 용이.
방식	useState로 input value 제어하는 경우. value는 React state로 관리 onChange 이벤트 발생하면 state 업데이트	ref를 사용해 DOM 요소에 직접 접근해 값 읽기/쓰기
예시	실시간 유효성 검증(이메일 형식 확인) 폼 데이터를 동적으로 처리해야할 때	입력값이 중요한 순간에만 필요(폼 제출 버튼 클릭 시) 폼에서 실시간 검증 필요 없음(단순 검색창, 필터)
단점	입력 필드 많으면 성능 이슈 위험 state 관리 때문에 코드 복잡해질 수 있음	입력값과 state가 동기화되지 않아 복잡한 로직 구현X React 철학(state와 ui 동기화)에 어긋남

 

//Controlled Component
function ControlledInput() {
  const [value, setValue] = React.useState("");

  const handleChange = (e) => {
    setValue(e.target.value); // 상태를 업데이트
  };

  return (
    <input 
      type="text" 
      value={value} // 상태와 동기화
      onChange={handleChange} // 상태 업데이트 핸들러
    />
  );
}

 

// Uncontrolled Component
function UncontrolledInput() {
  const inputRef = React.useRef();

  const handleSubmit = () => {
    alert(inputRef.current.value); // 입력값을 읽음
  };

  return (
    <div>
      <input type="text" ref={inputRef} /> {/* DOM에 직접 접근 */}
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

---

출처

[1] 매일메일. 241220. React의 Controlled Component와 Uncontrolled Component의 차이점에 대해서 설명하세요. 17번. https://maeil-mail.kr

[2] gpt에게 controlled component, uncontrolled component에 대해 묻다.