[React] UnControlled Component

input 의 value를 변경하기 위해선 다음과 같이 코드를 작성합니다

const ControlledComponent = () => {
  const [value, setValue] = useState('');

  const handleSubmit = () => {
    onSubmit(value);
  };
  

  return (
    <form onSubmit={handleSubmit}>
      <input type='text' value={value} onChange={e => setValue(e.target.value)} />
      <button type='submit'>Submit</button>
    </form>
  );
};

const UnControlledComponent = () => {
  const inputRef = useRef();

  const handleSubmit = () => {
    const value = inputRef.current.value;
    onSubmit(value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type='text' ref={inputRef} />
      <button type='submit'>Submit</button>
    </form>
  );
}

ControlledComponent에선 state를 사용하여 value를 변경중이고 UnControlledComponent는 input tag의 기본기능을 활용하여 value를 변경합니다

Controlled Component vs UnControlled Component

구분	Controlled Component	UnControlled Component
정의	컴포넌트의 상태가 React에 의해 제어되는 컴포넌트	컴포넌트의 상태가 DOM 자체에 의해 제어되는 컴포넌트
데이터 흐름	단방향 데이터 흐름 (부모 -> 자식)	양방향 데이터 흐름 (DOM -> React)
장점	- 상태를 명확하게 관리할 수 있어 디버깅이 용이함 - 입력값에 대한 즉각적인 유효성 검사가 가능함 - 모든 상태 변화가 React의 상태로 관리되므로 예측 가능성이 높음	- 초기 설정이 간단하고 빠름 - 외부 라이브러리와의 통합이 쉬움
단점	- 코드가 복잡해질 수 있음 - 성능에 영향을 줄 수 있음 (특히 많은 양의 데이터 처리 시)	- 상태를 추적하기 어려움 - 입력값의 유효성 검사가 어려움 - 초기값 설정이 복잡할 수 있음
사용 예시	- 폼 데이터가 복잡하고, 입력값에 대한 즉각적인 피드백이 필요한 경우	- 간단한 폼이나 초기값이 중요하지 않은 경우

 

react-hook-form 사용이유?

UnControlled Component를 사용하면 react에 의해 제어되지않아 데이터 관리가 어려울수 있습니다

form내에서 사용되는  input, select, textarea 같은 컴포넌트는 submit시 value값들을 가져오는데 어려움을 겪을수 있는데요

하지만 https://react-hook-form.com/과 같이 라이브러리를 이용한다면 좀더 수월하게 UnControlled Component를 다룰수 있고

form의 최적화도 할수 있게 됩니다

 

참고

• https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components

• https://react-hook-form.com/