[React] 제어 컴포넌트와 비제어 컴포넌트

 

 

 

 

 

 

 

✅ 제어 컴포넌트

HTML에서 form element는 사용자의 입력을 기반으로 자신의 state를 관리한다.

React에서는 useState로 상태값을 관리한다.

• React state를 '신뢰 가능한 단일 출처 (single source of truth)'로 만들어 두 요소를 결합할 수 있다.
• React 컴포넌트 내에서 HTML의 폼 엘리먼트까지 제어를 한다. (입력값 등)
• 항상 입력의 현재값을 가진다. 즉, 데이터(상태)와 UI(입력)가 항상 동기화된다.
• 대부분의 경우 폼을 구현할 때, 제어 컴포넌트를 사용하는 것을 지향한다.

import React, { useState } from "react";

function SimpleForm() {
  const [nickname, setNickname] = useState("");

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(nickname);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>닉네임 : </label>
      <input
        type="text"
        name="nickname"
        onChange={handleChange}
        value={nickname}
      />
      <input type="submit" value="제출" />
    </form>
  );
}

쉽게 말해, 사용자의 입력을 받는 태그 요소에 event 속성을 이용해  useState 로 값을 관리하는 방식을 말한다.

 

 

 

✅ 비제어 컴포넌트

제어 컴포넌트로 데이터를 변경하려면 이벤트 핸들러를 작성하고, React 컴포넌트를 통해 모든 입력 상태를 연결해야 했다. 

이러한 경우, 제어 컴포턴트는 입력 폼을 구현하기 위한 대체 기술로 비제어 컴포넌트를 사용할 수 있다.

 

• DOM 자체에서 폼 데이터를 다룬다.
• DOM에 직접 접근할 수 있도록 하는 것 =>  ref 를 활용

import React, { useRef, useState } from "react";

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>닉네임 : </label>
      <input
        type="text"
        name="nickname"
        ref={inputRef}
      />
      <input type="submit" value="제출" />
    </form>
  );
}

 

 

 

참고)

https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/

Controlled and uncontrolled form inputs in React don't have to be complicated - Gosha Spark