반응 제어 구성 요소와 제어되지 않는 구성 요소란 무엇입니까?

반응 제어 구성 요소와 제어되지 않는 구성 요소란 무엇입니까?

ReactJ에서 제어되는 구성 요소와 제어되지 않는 구성 요소는 무엇입니까?그들은 서로 어떻게 다릅니까?

이는 스테이트풀한 DOM 컴포넌트(폼 요소)와 관련되어 있으며 React 문서에서는 그 차이를 설명합니다.

• 제어된 컴포넌트는 현재 값을 다음과 같이 취득하는 컴포넌트입니다.props.onChange부모 컴포넌트는 콜백을 처리하여 자신의 상태를 관리하고 새로운 값을 제어된 컴포넌트에 전달함으로써 콜백을 "제어"합니다.이를 "덤 컴포넌트"라고도 할 수 있습니다.
• Uncontrolled Component는 자체 상태를 내부에 저장하는 컴포넌트입니다.또, 다음의 명령어를 사용해 DOM 에 문의합니다.ref이데올로기 때문에HTML에 더 가깝습니다.HTML에 조금 가깝습니다.

대부분의 네이티브 React 양식 구성 요소는 제어된 사용과 제어되지 않은 사용을 모두 지원합니다.

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

대부분의 경우(또는 모든 경우) 제어된 구성 요소를 사용해야 합니다.

둘 다 양식 요소를 렌더링합니다.

Uncontrolled component 및 Controlled component는 HTML 양식 요소를 렌더링하는 React 구성 요소를 설명하는 데 사용되는 용어입니다.HTML 양식 요소를 렌더링하는 React 구성 요소를 생성할 때마다 이 두 가지 중 하나를 생성합니다.

제어되지 않은 컴포넌트와 제어된 컴포넌트는 폼 요소에서 데이터에 액세스하는 방법이 다릅니다(<input>,<textarea>,<select>를 참조해 주세요.

제어되지 않는 컴포넌트

제어되지 않는 구성 요소는 양식 요소를 렌더링하는 구성 요소로, 양식 요소의 데이터가 DOM(기본 DOM 동작)에 의해 처리됩니다.입력의 DOM 노드에 액세스하여 값을 추출하려면 ref를 사용합니다.

예 - 제어되지 않는 구성 요소:

const { useRef } from 'react';

function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

제어된 컴포넌트

제어된 구성 요소는 양식 요소를 렌더링하고 양식 데이터를 구성 요소 상태로 유지하여 제어하는 구성 요소입니다.

제어된 구성 요소에서 양식 요소의 데이터는 DOM이 아닌 React 구성 요소에 의해 처리되어 구성 요소의 상태로 유지됩니다.제어된 구성 요소는 기본적으로 HTML 양식 요소의 기본 동작을 재정의합니다.

요소폼 요소)를 .<input>,<textarea> ★★★★★★★★★★★★★★★★★」<select>)의 Atribut을 설정함으로써 스테이트로 이행합니다.value ★★★★★★★★★★★★★★★★」onChange.

예 - 제어 컴포넌트:

const { useState } from 'react';

function Controlled () {
  const [email, setEmail] = useState();

  const handleInput = (e) => setEmail(e.target.value);


  return <input type="text" value={email} onChange={handleInput} />;
}

제어된 컴포넌트는 콜백함수에서 변경된 값을 얻는 컴포넌트이며 제어되지 않은 컴포넌트는 DOM에서 변경된 값을 갖는 컴포넌트입니다.예를 들어 입력값이 변경되면 Controlled Component에서 onChange 함수를 사용할 수 있으며 참조와 같은 DOM을 사용하여 값을 얻을 수 있습니다.

제어 컴포넌트:양식 데이터는 React 구성 요소에 의해 처리됩니다.

반응 시 제어된 구성 요소의 흐름JS 이미지

제어되지 않은 구성 요소: 폼 데이터는 DOM 자체에서 처리됩니다.

반응에서 제어되지 않은 구성 요소의 흐름JS 이미지

통제된 구성요소는 주로 구성요소의 소품가치가 모 구성요소 또는 매장(rex의 경우)에서 나오는 구성요소이다.예:

<ControlledComp value={this.props.fromParent}/>

제어되지 않은 컴포넌트의 경우 이벤트 처리에 따라 컴포넌트 상태에서 컴포넌트 값을 얻을 수 있습니다.예:

<UncontrolledComp value={this.state.independentValue}/>

제어된 컴포넌트는 상태를 유지하지 않습니다.

필요한 데이터는 부모 컴포넌트에서 부모 컴포넌트로 전달됩니다.

콜백 함수는 부모에서 자녀로 전달되는 콜백 함수에 의해 이 데이터와 상호작용합니다.

TLDR;

https://www.youtube.com/watch?v=6L2Rd116EvY 그가 자세히 설명하는 페이지를 확인하실 수 있습니다.

제어된 컴포넌트

단어를 하지 않으면 된 컴포넌트는 형식 (예: 컴포넌트)입니다.<input/> 아래 DOM 입력 . 예를 들어 아래 코드를 복사하여 DOM 내에서 입력 필드를 변경하려고 합니다.

export default function Component() {

  return (
        <div>
            <input type="text" value="somevalue" />
            
          </div>
)
}

위의 입력 값을 아무리 업데이트하려고 해도 반응하지 않습니다.Respons는 상태를 사용하여 업데이트된 값을 제어하고 싶기 때문에 제어된 제목입니다.

할 수 있습니다.onChange ★★★★★★★★★★★★★★★★★」value아래와 같은 상태가 되도록 시험해 보세요.

function Component() {

  const [text,setText] = React.useState("")

  return (
          <div>

            <input type="text" onChange={(e)=>setText(e.target.value)} value={text} />

            <p>{text}</p> 
          </div>
  )
}

이제 입력 내용과 그 값을 업데이트하여 렌더링 또는 즉각적인 검증을 수행할 수 있습니다.

제어되지 않는 컴포넌트

되지 않은 는 폼 입니다.<input/>이 값은 돔 요소로 처리할 수 있으며 제어됨과 제어되지 않음의 주요 차이점은 값 속성 정의입니다.통제되지 않는 것을 위해, 우리는defaultValue대신, 혹은 전혀 가치가 없는 경우도 있습니다.

function Component() {

  return (
         <div>

            <input type="email" id="message" defaultValue="example@mail.com" />
            
          </div>
  )
}

위의 입력 값은 변경할 수 있으며 리액트 없이 DOM에 의해 제어됩니다.

즉각적인 검증을 수행하고 동적 입력을 적용할 수 있으므로 Controlled Components를 보다 효과적으로 사용하는 것이 좋습니다.

제어된 컴포넌트는 React에서 작업을 수행할 때 선호되는 방법입니다.

이를 통해 내부 상태를 통해 요소의 값을 검색하기 위해 DOM에 의존하는 대신 모든 구성 요소 상태를 React 상태로 유지할 수 있습니다.

제어된 컴포넌트는 상태로부터 입력값을 도출하는 컴포넌트입니다.

언급URL : https://stackoverflow.com/questions/42522515/what-are-react-controlled-components-and-uncontrolled-components