제어 컴포넌트와 비제어 컴포넌트

React 문서를 보면서 제어 컴포넌트와 비제어 컴포넌트 용어를 보게되면서 차이점을 알고자 기록으로 남겼다.

제어 컴포넌트 (Controlled Component)

HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트들은 일반적으로 사용자의 입력을 기반으로 태그 스스로 state 관리가 가능하다.

하지만 직접 state를 제어할 수도 있는데 이렇게 React에 의해 값이 제어되는 입력 폼 엘리먼트를 제어 컴포넌트 라고 한다.

예시

function App() {
  const [input, setInput] = useState("");

  const handleChange = (event) => {
    setInput(event.target.value);
  };

  return (
    <div>
        <p>Input: {input}</p>
        <input
          type="text"
          value={input}
          onChange={handleChange}
        />
      <input type="submit" value="Submit" />
    </div>
  );
}

비제어 컴포넌트 (Uncontrolled Component)

위에서 언급된 <input>, <textarea>, <select>와 같은 태그들은 자체적으로 state를 관리하기 때문에 state값을 얻기 위해서는 태그의 참조(ref)를 활용해 폼 엘리먼트에 접근해야 한다.

제어 컴포넌트와 비교해서 코드가 훨씬 간결하지만 화면에 보여지는 UI와 사용자가 입력하는 상태가 동일하지 않기 때문에 구현해야할 기능에 따라 적절한 선택을 하면 될 것 같다.

예시

function App() {
  const inputRef = useRef();

  const submit = (e) => {
    e.preventDefault();
    console.log(inputRef.current?.value);
  }

  return (
    <form onSubmit={submit}>
        <p>Input: {inputRef.current?.value}</p>
        <input
          type="text"
          ref={inputRef}
        />
      <input type="submit" value="Submit" />
    </form>
  );
}

Refernce

• https://ko.reactjs.org/docs/forms.html#controlled-components

• https://ko.reactjs.org/docs/uncontrolled-components.html