반응에서 입력 지연(래깅)을 해결하는 방법

반응 영역에서 입력을 처리할 때 두 가지 옵션이 있습니다.

controlled component

uncontrolled component

controlled components :
we update the value of the input by using value prop and onChange event

uncontrolled component :
DOM takes care of updating the input value. we can access the value by setting a ref on the input

입력 또는 텍스트 영역에 무언가를 입력할 때마다 지연(지연)이 있고 입력 업데이트가 매우 느린 상황에 직면했을 가능성이 있습니다. 오히려 짜증나고 나쁜 사용자 경험입니다.



이 동작은 제어 구성 요소 사용의 부작용입니다. 문제를 완화할 수 있는 이유와 방법을 살펴보겠습니다.

근본 원인

제어되는 구성 요소에는 입력이 통과하는 주기가 있습니다. 키를 누를 때마다 일부 상태를 변경하고(Redux 또는 useState 후크와 같은 전역 상태일 수 있음) React가 다시 렌더링하고 입력의 값 소품을 설정합니다. 새로운 상태로. 이 주기는 비쌀 수 있습니다. 그렇기 때문에 입력을 업데이트하는 동안 지연이 발생합니다. 또 다른 상황은 키를 누를 때마다 구성 요소가 다시 렌더링되는 거대한 구성 요소가 있는 경우입니다.



예:

복잡한 구성 요소(예: 입력이 많은 큰 양식)가 있고 입력이 변경될 때마다 전체 구성 요소가 다시 렌더링됨

키를 누를 때마다 전체 앱의 다시 렌더링을 트리거하는 스토어의 무언가를 변경하는 상태 관리(예: redux, 컨텍스트)가 있는 대형 웹 앱

바운스, 디바운스가 작동할까요?

우리가bounce 전역 상태를 업데이트하고 동일한 값을 다시 가져오면 지연이 추가되어 입력이 훨씬 더 나빠집니다. isolated component와 함께 사용하는 것이 좋지만 바운싱 및 디바운싱은 API를 호출하고 모든 키 입력에서 많은 정보를 가져오고 싶지 않을 때마다 효과적입니다.

솔루션

이 문제를 해결할 수 있는 몇 가지 방법이 있습니다.

제어되지 않는 구성 요소로 변경

몇 가지 입력이 있는 구성 요소가 있다고 가정해 보겠습니다.

function ComponentA() {
   const [value1, setState1] = useState();
   const [value2, setState2] = useState();
   const [value3, setState3] = useState();
   const handleSubmit = () => {
      //do something
   };
   <form onSubmit={handleSumbit}>
      <input value={value1} onChange={e => setState1(e.target.value)} />;
      <input value={value2} onChange={e => setState2(e.target.value)} />
      <input value={value3} onChange={e => setState2(e.target.value)} />
   </form>;
}

몇 가지 입력이 있는 구성 요소가 있다고 가정해 보겠습니다. 제어되지 않는 구성 요소를 사용하도록 코드를 변경할 수 있습니다. 그러면 값을 다시 가져오기 위해 입력이 다시 렌더링 단계를 거칠 필요가 없습니다.

function ComponentB() {
   const input1 = useRef();
   const input2 = useRef();
   const input3 = useRef();
   const handleSubmit = () => {
      // let value1=input1.current.value
      // let value2=input2.current.value
      // let value3=input3.current.value
      // do something with them or update a store
   };
   return (
      <form onSubmit={handleSubmit}>
         <input ref={input1} />;
         <input ref={input2} />
         <input ref={input3} />
      </form>
   );
}

onBlur

onBlur 이벤트로 상태(또는 전역 상태)를 업데이트할 수 있습니다. 사용자 경험 측면에서 이상적이지는 않지만

onInputBlur = (e) => {
   //setting the parent component state
   setPageValue(e.target.value);
}
onInputChange = (e) => {
   /*setting the current component state separately so that it will
      not lag anyway*/
   setState({inputValue: e.target.value});
}
   return (
      <input
         value = {this.state.inputValue}
         onBlur = {this.onInputBlur}
         onChange={this.onInputChange}
      >
   )

격리된 구성 요소

최적의 솔루션은 격리된 입력 구성 요소를 사용하고 입력 상태를 로컬에서 관리하는 것입니다.

import { debounce } from 'lodash';
function ControlledInput({ onUpdate }) {
   const [value, setState] = useState();
   const handleChange = e => {
      setState(e.target.value);
      onUpdate(e.target.value);
   };
   return <input value={value} onChange={handleChange} />;
}
function ComponentB() {
   const input1 = useRef();
   const input2 = useRef();
   const input3 = useRef();
   const handleSubmit = () => {
      //do something with the values
   };
   return (
      <form onSubmit={handleSubmit}>
         <ControlledInput
            onUpdate={val => {
               input1.current = val;
               // update global state by debounce ,...
            }}
         />
         ;
         <ControlledInput
            onUpdate={val => {
               input1.current = val;
               // update global state by debounce ,...
            }}
         />
         ;
         <ControlledInput
            onUpdate={val => {
               input1.current = val;
               //update global state by debounce ,...
            }}
         />
         ;
      </form>
   );
}

우리는 통제된 구성요소를 가지고 불필요한 재렌더링을 일으키거나 비용이 많이 드는 것을 거치지 않는 이점이 있습니다. 특정 기준을 확인하고 성공 또는 오류 메시지를 표시하는 사용자 지정 구성 요소를 만들 수 있습니다. 이제 바운싱, 디바운싱 메커니즘을 구현하고 전역 상태를 업데이트하거나 API를 가져올 수 있습니다. 우리의 입력 속도는 자연스럽고 모든 키 입력에서 불필요한 업데이트나 API 호출을 일으키지 않습니다.

소식을 듣고 싶습니다. 연결해 보겠습니다.