제어 컴포넌트 (Controlled Component)

컴포넌트의 상태나 속성(props)으로 주어진 값을 활용하는 컴포넌트.
사용자의 입력을 받는 컴포넌트에 event 객체를 이용해 setState()로 값을 저장하는 방식이 제어 컴포넌트 방식이다.
React에 의해 값이 제어되므로 제어 컴포넌트라고 부른다.
제어 컴포넌트는 사용자가 입력한 값과 저장되는 값이 실시간으로 동기화된다.

import { useState } from "react";
 
function App() {
  const [inputValue, setInputValue] = useState("");
 
  return (
    <div className="App">
      <input
        onChange={(e) => setInputValue(e.target.value)}
        value={inputValue}
      />
      <div>입력값 : {inputValue}</div>
    </div>
  );
}
 
export default App;

비제어 컴포넌트

DOM 자체에서 폼 데이터가 다루어진다.
HTML의 태그 중에서는 태그 자체적으로 상태를 갖는 경우가 있다.

대표적인 경우가 바로 위에서 예시로 든 <input> 태그로, input 태그에 값을 입력하면 해당 값은 입력 폼 내부의 상태로 관리된다.

import { useRef } from "react";
 
function App() {
  const inputRef = useRef();
 
  return (
    <div className="App">
      <input type="text" ref={inputRef} defaultValue="hi" />
      <div>입력값 : {inputRef.current?.value}</div>
    </div>
  );
}
 
export default App;