React에서 제어되는 구성 요소와 제어되지 않는 구성 요소

1. React에서 제어되는 구성 요소
2. React의 제어되지 않는 구성 요소

웹 개발자는 여러 가지 이유로 JavaScript 기반 프레임워크를 사용합니다. 주로 가능한 최상의 사용자 경험을 제공하는 대화형 웹 애플리케이션을 구축할 수 있기 때문입니다.

이 기사에서는 React에서 제어되는 구성 요소의 개념에 대해 설명하고 이를 구현하는 방법과 필요한 시기에 대해 조언합니다.

두 가지 유형의 구성 요소 간의 주요 차이점은 상태를 유지하는 방법과 입력 필드의 값에 액세스하는 방법입니다.

React에서 제어되는 구성 요소

이러한 유형의 구성 요소의 경우 사용자 입력은 항상 상태에 저장되며 setState() 메서드를 사용해서만 업데이트됩니다. <input> 요소의 value 속성은 이 상태 값으로 설정됩니다.

이렇게 하면 상태가 진실의 단일 소스가 됩니다. 입력 필드에 무언가를 입력하면 상태 값이 업데이트되고 입력 필드의 값은 가장 최근 상태를 반영합니다.

즉, 텍스트 필드는 상태를 업데이트하고 해당 값도 상태에서 가져옵니다.

다음은 제어되는 구성 요소의 예입니다.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [input, setInput] = useState("");
  return (
    <div className="App">
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      ></input>
      <p>The text you entered:</p>
      <h1>{input}</h1>
    </div>
  );
}

이 예제에서는 핵심 React 라이브러리에서 useState() 후크를 가져옵니다. 후크를 사용하여 상태 변수 input을 만들고 함수를 사용하여 값을 업데이트합니다.

상태 변수를 빈 문자열로 초기화합니다.

JSX에는 <input>, <p> 및 <h1>의 세 가지 요소를 포함하는 <div> 요소가 있습니다. 사용자가 무언가를 입력하거나 삭제할 때마다 onChange 이벤트 핸들러가 입력 필드의 가장 최근 값으로 상태를 업데이트하도록 입력 요소를 설정합니다.

또한 입력 필드가 상태에서 값을 가져오도록 value 특성을 설정합니다.

마지막으로 상태 변수의 문자열을 나타내는 헤더 텍스트를 표시하는 <h1> 요소가 있습니다.

CodeSandbox에서 이 라이브 데모를 확인하고 모든 것이 어떻게 작동하는지 확인하십시오.

React의 제어되지 않는 구성 요소

DOM의 입력 요소는 상태를 유지할 수 있습니다. 제어되지 않는 구성 요소의 경우 DOM 요소에서 직접 값에 액세스합니다.

React에서는 refs를 사용하여 입력 요소에 액세스합니다. 이 경우 ref.current.value를 사용하여 입력 요소의 현재 값에 액세스합니다.

따라서 제어되지 않는 구성 요소를 포함하려면 React에서 refs를 생성해야 합니다. 이를 위해서는 기능적 구성 요소에 대한 useRef() 후크 또는 클래스 구성 요소의 React.createRef() 메서드가 필요합니다.

React 문서에 따르면 애플리케이션에는 제어된 구성 요소만 있어야 합니다. 제어되지 않는 구성 요소는 예측할 수 없으며 유지 관리가 어렵습니다.