Controlled Component와 Uncontrolled Component

Controlled Component와 Uncontrolled Component

Controlled Component

• 입력값이 State를 통해 제어되는 컴포넌트이다.
• 입력 요소의 value는 리액트 상태와 동기화되며, 사용자가 입력을 변경할 때마다 onChange 이벤트 핸들러가 호출되어 상태를 업데이트한다.
• 장점:
  • 리액트 상태로 관리되므로 입력값을 실시간으로 검증하거나 수정하기 쉽다.
  • 여러 입력 필드 간의 복잡한 의존 관계나 동적인 폼 로직 처리에 적합하다.

import React, { useState } from 'react';

const ControlledInput = () => {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <input 
      type="text" 
      value={value} 
      onChange={handleChange} 
    />
  );
};

export default ControlledInput;

 

 

Uncontrolled Component

• 입력값이 DOM 자체에서 관리되기 때문에, 리액트는 이를 제어하지 않는 컴포넌트이다.
• ref를 사용하여 DOM 요소에 직접 접근해 값을 읽거나 조작할 수 있으며, 리액트 상태를 사용하지 않아 DOM  자체가 입력값을 제어한다.
• 장점:
  • 단순한 폼이나 초기값만 중요한 경우 구현이 간단하다.
  • 상태 업데이트로 인한 렌더링 오버헤드가 없기 때문에 성능에 유리할 수 있다.

import React, { useRef } from 'react';

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

  const handleSubmit = () => {
    alert(`Input Value: ${inputRef.current.value}`);
  };

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

export default UncontrolledInput;

 

사용해야 할 때

Controlled Component

• 이메일 형식이나 비밀번호 유효성 검사 등, 입력값을 실시간으로 검증해야 할 때나 입력값이 다른 컴포넌트 또는 비즈니스 로직에 영향을 줄 때 사용한다.

Uncontrolled Component

• 성능이 중요한 간단한 폼을 처리할 때, 입력값에 대한 실시간 검증이나 동기화가 필요하지 않을 때 사용한다.