React - 제어 컴포넌트와 비제어 컴포넌트의 차이

[ 제어 컴포넌트 ]

 
공식문서
 
HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다.

React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.
 
우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다.

그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다.


이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다.
 
출처 : https://ko.reactjs.org/docs/forms.html#controlled-components
 
 
=> 공식문서에는 저렇게 나와있으나 이해하기가 어려운 부분이 많다.

 

한마디로, 사용자 입력값을 setState로 저장하여 제어하는 입력 폼 엘리먼트를 제어 컴포넌트라고 부른다. 사용자가 입력한 값과 저장되는 값이 실시간으로 동기화되는 컴포넌트이다.
 
 
예시
 

export default function App() {
  const [input, setInput] = useState("");
  const onChange = (e) => {
    setInput(e.target.value);
  };

  return (
    <div className="App">
      <input onChange={onChange} />
    </div>
  );
}

 
 

[ 비제어 컴포넌트 ]

 
공식문서
 
대부분 경우에 폼을 구현하는데 제어 컴포넌트를 사용하는 것이 좋습니다. 제어 컴포넌트에서 폼 데이터는 React 컴포넌트에서 다루어집니다.

대안인 비제어 컴포넌트는 DOM 자체에서 폼 데이터가 다루어집니다.
 
모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 컴포넌트를 만들려면 ref를 사용하여 DOM에서 폼 값을 가져올 수 있습니다.
 
 
=> 폼으로부터 사용자 입력값을 읽을 때 요소의 내부 값을 얻어오는 바닐라 자바스크립트와 유사한 방식의 입력 폼 컴포넌트로, 제어 컴포넌트 방식에서 사용한 setState()를 사용하지 않고 ref를 사용해서 값을 얻는다.
 

export default function App() {
  const inputRef = useRef();
  const onClick = () => {
    console.log(inputRef.current.value);
  };
 
  return (
    <div className="App">
      <input ref={inputRef} />
      <button type="submit" onClick={onClick}>
        Send
      </button>
    </div>
  );
}​

 

 
 
 
https://ko.reactjs.org/docs/forms.html#controlled-components
https://ko.reactjs.org/docs/uncontrolled-components.html
https://velog.io/@yukyung/React-%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%99%80-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0