비제어 컴포넌트란?

베제어 컴포넌트(Uncontrolled Component)는 HTML 폼 요소 자체를 리액트의 관리 없이 사용하는 방식을 의미한다. 이것은 HTML폼 요소의 기본 동작을 그대로 사용하는 방식이다. 따라서 HTML폼을 그대로 사용하지만, 리액트 상태 관리와는 분리된 방식으로 동작한다.

필요할 때 ref를 사용하여 값에 접근한다.

---

특징

1.  DOM을 직접 참조 : 입력 값을 상태로 관리하지 않고, DOM에서 ref를 통해 값에 접근한다.
2. HTML기본 동작 유지 : 폼 데이터는 사용자가 입력한 값으로 DOM에 저장되며, 리액트는 이를 제어하지 않는다.
3. 간단한 구현 : 입력 데이터가 리액트 상태와 동기화되지 않기 때문에 코드가 간단해질 수 있다.
4. 유효성 검사 등 동적 처리에 제약 : 입력 데이터에 기반한 동적 처리를 하려면 DOM값을 수동으로 가져와야 하므로 번거로울 수 있다.

---

비제어 컴포넌트의 예제

 

1. 텍스트 입력

import React, { useRef } from "react";

function UncontrolledComponent() {
  const inputRef = useRef(); // DOM 참조를 위한 ref 생성

  const handleSubmit = (e) => {
    e.preventDefault(); // 폼 제출 기본 동작 방지
    alert(`입력된 값: ${inputRef.current.value}`); // DOM에서 값 가져오기
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" ref={inputRef} /> {/* 상태 관리 없이 ref로 직접 접근 */}
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

export default UncontrolledComponent;

 

2. 파일 업로드

function FileUploadExample() {
  const fileInputRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`선택된 파일: ${fileInputRef.current.files[0].name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        파일 선택:
        <input type="file" ref={fileInputRef} />
      </label>
      <button type="submit">업로드</button>
    </form>
  );
}

 

파일 입력의 값은 일반적으로 ref를 통해 접근한다. 리액트의 상태로 관리하지 않느 것이 더 효율적이다.