React에서 통제되지 않은 구성 요소를 어떻게 생성합니까?-프런트엔드 Q&A-php.cn

React에서 통제되지 않은 구성 요소를 어떻게 생성합니까?

React의 통제되지 않은 구성 요소는 구성 요소의 상태가 관리하는 대신 양식 데이터를 DOM 자체에 의해 처리하는 구성 요소입니다. 통제되지 않은 구성 요소를 만들려면 다음 단계를 따릅니다.

defaultValue Prop : value 사용하여 양식 요소의 초기 값을 설정하는 대신 defaultValue 사용합니다. 예를 들어 입력 필드의 경우 다음을 수행합니다.
```
 <code class="jsx"><input type="text" defaultvalue="Initial Value"></code>
```
로그인 후 복사
변경 상태 설정을 피하십시오 : 제어 된 구성 요소에서는 각 변경 이벤트에서 상태를 업데이트합니다. 통제되지 않은 구성 요소의 경우이 작업을 수행하지 않습니다. DOM이 내부적으로 변경 사항을 처리하게했습니다.

Refs를 통해 데이터 액세스 : 데이터는 React의 상태에서 관리되지 않으므로 필요할 때 현재 값에 액세스 할 수있는 방법이 필요합니다. React의 ref 시스템을 사용하여 DOM 노드에 대한 참조를 만듭니다. 당신이하는 방법은 다음과 같습니다.

 <code class="jsx">class UncontrolledForm extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); } handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', this.inputRef.current.value); } render() { return ( <form onsubmit="{this.handleSubmit}"> <input type="text" defaultvalue="Initial Value" ref="{this.inputRef}"> <button type="submit">Submit</button> </form> ); } }</code>

로그인 후 복사

이 단계를 수행하면 React에서 통제되지 않은 구성 요소를 만들 수 있으며, 여기서 양식 데이터는 DOM에 의해 직접 처리됩니다.

React 애플리케이션에서 제어되지 않은 구성 요소를 사용하면 어떤 이점이 있습니까?

React Applications에서 제어되지 않은 구성 요소를 사용하면 몇 가지 이점이 있습니다.

구현하기 쉽다 : 통제되지 않은 구성 요소는 상태를 관리하고 변경 처리기를 구현할 필요가 없기 때문에 설정하기가 간단합니다. 이를 통해 간단한 형태 나 개발자가 새로운 반응을 보일 때 적합합니다.
보일러 플레이트 코드가 적습니다 : 제어되지 않은 구성 요소는 상태 관리 및 이벤트 처리기가 상태를 업데이트 할 필요가 없으므로 일반적으로 코드가 줄어 듭니다. 이를 통해 응용 프로그램을보다 쉽게 읽고 유지 관리 할 수 있습니다.
더 나은 성능 : DOM이 직접 변경할 수있게함으로써 일부 시나리오에서 더 나은 성능을 달성 할 수 있습니다. 이는 각 KeyStroke가 상태 업데이트 및 재 렌더를 트리거하지 않는 대형 형식 또는 다중 입력 필드를 처리하는 데 특히 유용합니다.
비 반응 코드와의 호환성 : 기존 비 반응 코드와 React를 통합하는 경우 통제되지 않은 구성 요소는 RECT 특이 적 상태 관리 시스템이 필요하지 않기 때문에 작업하기가 더 쉬울 수 있습니다.
간단한 사용 사례에 유용 : 빠른 프로토 타이핑 또는 간단한 사용 사례의 경우 통제되지 않은 구성 요소는 복잡한 상태 관리 없이도 더 간단하고 구현하기가 더 빠를 수 있습니다.

React에서 통제되지 않은 구성 요소의 값에 어떻게 액세스 할 수 있습니까?

React에서 통제되지 않은 구성 요소의 값에 액세스하려면 일반적으로 ref 시스템을 사용합니다. 당신이 할 수있는 방법은 다음과 같습니다.

REF 생성 : 구성 요소에서 React.createRef() 또는 기능적 구성 요소의 useRef 후크를 사용하여 심판을 만듭니다.

 <code class="jsx">// In a class component constructor(props) { super(props); this.inputRef = React.createRef(); } // In a functional component const inputRef = useRef(null);</code>

로그인 후 복사

Ref를 DOM 요소에 연결하십시오 . 양식 요소를 렌더링 할 때 ref 를 전달하십시오.

 <code class="jsx">// Class component <input type="text" defaultvalue="Initial Value" ref="{this.inputRef}"> // Functional component <input type="text" defaultvalue="Initial Value" ref="{inputRef}"></code>

로그인 후 복사

값 액세스 : 양식 제출 또는 기타 이벤트와 같이 필요할 때 제어되지 않은 구성 요소의 값에 액세스 할 수 있습니다. ref.current.value 사용하여 현재 값을 얻으십시오.

 <code class="jsx">// In a class component handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', this.inputRef.current.value); } // In a functional component const handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', inputRef.current.value); }</code>

로그인 후 복사

이 단계를 수행하면 React에서 제어되지 않은 구성 요소의 값에 효과적으로 액세스 할 수 있습니다.

React 개발에서 제어되지 않은 구성 요소를 언제 선택해야합니까?

제어되지 않은 구성 요소와 제어되지 않은 구성 요소 중에서 선택하는 것은 프로젝트의 특정 요구와 복잡성에 따라 다릅니다. 통제되지 않은 구성 요소를 선호하는 몇 가지 시나리오는 다음과 같습니다.

간단한 형태 : 양식 데이터를 세밀하게 제어 할 필요가없는 간단한 형태의 경우 통제되지 않은 구성 요소가 더 쉽고 구현하기가 더 빠를 수 있습니다.
빠른 프로토 타이핑 : 프로토 타이핑 또는 신속하게 개발할 때 제어되지 않은 구성 요소는 설정이 적기 때문에 시간이 덜 걸릴 수 있습니다.
비 반응 코드와의 통합 : React를 React를 사용하지 않는 기존 애플리케이션에 통합하는 경우 통제되지 않은 구성 요소가 기존 DOM 조작과 더 밀접하게 조정하므로 작업하기가 더 쉬울 수 있습니다.
성능 문제 : 성능이 중요한 응용 분야, 특히 대형 형태의 경우 통제되지 않은 구성 요소는 모든 변화에 대한 리 렌더를 트리거하지 않기 때문에 더 나은 성능을 제공 할 수 있습니다.
레거시 코드 유지 보수 : 제어되지 않은 구성 요소를 이미 사용하는 기존 코드로 작업하는 경우 일관성과 유지 보수의 용이성을 위해 동일한 패턴을 고수하는 것이 더 간단 할 수 있습니다.
상태 관리가 필요하지 않은 경우 : React의 상태 (예 : 간단한 검색 입력)에서 양식 데이터를 관리 할 필요가없는 경우 제어되지 않은 구성 요소가 더 간단 할 수 있습니다.