useRef 및 useCallback 후크를 사용하여 React에서 양식 성능을 최적화하는 방법

useRef 및 useCallback 후크를 사용하여 React에서 양식 성능을 최적화하는 방법
당신과 같은 독자는 MUO를 지원하는 데 도움이 됩니다. 귀하가 당사 사이트의 링크를 사용하여 구매하면 당사는 제휴 수수료를 받을 수 있습니다. 자세히 알아보기

React는 사용자 인터페이스를 만드는 데 가장 널리 사용되는 프레임워크 중 하나가 되었습니다. 많은 프런트 엔드 개발자는 효과, 다용성 및 확장성 때문에 JavaScript 라이브러리를 선호합니다. 그러나 웹 양식을 올바르게 최적화하지 않으면 여전히 성능 문제가 발생할 수 있습니다.





React에는 불필요한 업데이트 및 다시 렌더링을 줄이는 데 도움이 되는 useRef 및 useCallback 후크가 있습니다.



오늘의 메이크업 비디오 콘텐츠를 계속하려면 스크롤하세요.

이러한 후크의 가장 효과적인 애플리케이션을 탐색하고 React 양식의 속도를 높이십시오.





useRef 및 useCallback 후크 이해

React의 가장 효과적인 성능 향상 기능 중 두 가지는 useRef 및 useCallback 후크입니다.

그만큼 useRef 후크는 수많은 구성 요소 렌더링에서 지속될 수 있는 변경 가능한 참조를 생성합니다. 일반적인 용도로는 DOM 요소 액세스, 다시 렌더링을 트리거하지 않는 상태 저장, 비용이 많이 드는 계산 캐싱 등이 있습니다.



메모리 효율적인 기능을 사용할 수 있습니다. useCallback , 자식 구성 요소에 의존하는 구성 요소의 기능을 향상시키기 위한 후크로 사용됩니다. 소품으로 전달되는 이벤트 핸들러 및 기타 루틴에 일반적으로 이 메서드를 사용합니다.

윈도우 7이 영원히 꺼지는 데 걸리는 시간

React의 일반적인 양식 성능 문제

반응의 양식 많은 양의 사용자 입력 및 변경 사항으로 인해 성능 문제가 있을 수 있습니다. 느린 응답 시간, 불필요한 재렌더링, 열악한 상태 관리는 자주 발생하는 문제입니다.



이러한 문제는 일반적으로 다음으로 인해 발생합니다.

  • 불필요한 재렌더링: 구성 요소는 결과에 영향을 미치지 않는 소품 또는 표현식의 변경으로 인해 불필요한 재렌더링으로 애플리케이션 속도를 저하시킬 수 있습니다.
  • 비용이 많이 드는 계산: 각 렌더링에 대해 비용이 많이 드는 계산을 수행하는 경우 구성 요소가 응용 프로그램의 성능을 저하시킬 수 있습니다.
  • 비효율적인 상태 관리: 구성 요소의 비효율적인 상태 관리는 무의미한 업데이트 및 다시 렌더링으로 이어질 수 있습니다.

양식 최적화를 위해 useRef 및 useCallback 후크를 사용하는 방법

React의 useRef 및 useCallback 후크를 활용하여 양식 속도를 높이는 방법을 살펴보겠습니다.



useRef를 사용하여 양식 요소에 액세스

그만큼 useRef 후크를 사용하면 다시 렌더링하지 않고도 양식 요소에 액세스할 수 있습니다. 이는 여러 구성 요소가 있는 복잡한 설계에 특히 유용합니다. 예를 들면 다음과 같습니다.

 import React, { useRef } from 'react'; 
 
function Form() { 
  const inputRef = useRef(null); 
 
  function handleSubmit(event) { 
    event.preventDefault(); 
    const inputValue = inputRef.current.value; 
    console.log(inputValue); 
  } 
 
  return ( 
    <form onSubmit={handleSubmit}> 
      <input type="text" ref={inputRef} /> 
      <button type="submit">Submit</button> 
    </form> 
  ); 
}

이 예제는 useRef 후크를 사용하여 입력 구성 요소를 참조합니다. 양식을 제출한 후 다시 렌더링하지 않고도 입력 값에 액세스할 수 있습니다.

useCallback으로 이벤트 핸들러 최적화

그만큼 useCallback 후크는 당신이 할 수 있습니다 memoize 이벤트 핸들러 및 기타 기능 소품으로 자식 구성 요소에 전달합니다. 결과적으로 자식 구성 요소를 다시 렌더링할 필요가 없을 수 있습니다. 예를 들면 다음과 같습니다.

 import React, { useCallback, useState } from 'react'; 
 
function Form() { 
  const [value, setValue] = useState(''); 
   
  const handleChange = useCallback((event) => { 
    setValue(event.target.value); 
  }, []); 
 
  const handleSubmit = useCallback((event) => { 
    event.preventDefault(); 
    console.log(value); 
  }, [value]); 
 
  return ( 
    <form onSubmit={handleSubmit}> 
      <input type="text" value={value} onChange={handleChange} /> 
      <button type="submit">Submit</button> 
    </form> 
  ); 
}

이 예제는 useCallback 후크를 사용하여 핸들 변경 그리고 핸들제출 기능. 이렇게 하면 버튼 및 정보 구성 요소가 불필요하게 다시 렌더링되는 것을 방지할 수 있습니다.

useRef 및 useCallback 후크를 사용한 양식 최적화

useRef 및 useCallback 후크를 사용하여 React에서 양식 속도를 높이는 방법에 대한 실제 사례를 살펴보겠습니다.

디바운싱 입력

디바운싱 입력은 양식 성능을 개선하기 위해 자주 사용하는 최적화 기술입니다. 호출 후 일정 시간이 지날 때까지 함수 사용을 지연시키는 것입니다. 다음 예제에서는 useCallback 후크를 사용하여 핸들 변경 방법. 이 기술은 입력 요소의 속도를 개선하고 불필요한 업데이트를 방지하는 데 도움이 될 수 있습니다.

 import React, { useCallback, useState } from 'react'; 
 
function Form() { 
  const [value, setValue] = useState(''); 
 
  const debouncedHandleChange = useCallback( 
    debounce((value) => { 
      console.log(value); 
    }, 500), 
    [] 
  ); 
 
  function handleChange(event) { 
    setValue(event.target.value); 
    debouncedHandleChange(event.target.value); 
  } 
 
  return ( 
    <form> 
      <input type="text" value={value} onChange={handleChange} /> 
    </form> 
  ); 
} 
 
function debounce(func, wait) { 
  let timeout; 
 
  return function (...args) { 
    clearTimeout(timeout); 
 
    timeout = setTimeout(() => { 
      func.apply(this, args); 
    }, wait); 
  }; 
}

이 예제에서는 debounce 함수를 사용하여 실행을 연기합니다. 핸들 변경 방법을 500밀리초 단위로 변경합니다. 이렇게 하면 입력 요소의 속도가 향상되고 불필요한 업데이트를 방지할 수 있습니다.

지연 초기화

게으른 초기화는 값비싼 리소스가 실제로 필요할 때까지 생성을 지연시키는 기술입니다. 양식의 맥락에서 양식이 제출될 때만 활용되는 상태를 초기화하는 것이 도움이 됩니다.

다음 예제는 다음을 느리게 초기화합니다. 양식 상태 useRef 후크를 사용하여 개체. 이렇게 하면 실제로 필요할 때까지 formState 객체 생성을 연기하여 양식의 성능을 향상시킬 수 있습니다.

 import React, { useRef, useState } from 'react'; 
 
function Form() { 
 const [value, setValue] = useState(''); 
 const formStateRef = useRef(null); 
 
  function handleSubmit(event) { 
    event.preventDefault(); 
 
    const formState = formStateRef.current || { 
      field1: '', 
      field2: '', 
      field3: '', 
    }; 
 
    console.log(formState); 
  } 
 
  function handleInputChange(event) { 
    setValue(event.target.value); 
  } 
 
  return ( 
    <form onSubmit={handleSubmit}> 
      <input type="text" value={value} onChange={handleInputChange} /> 
      <button type="submit">Submit</button> 
    </form> 
  ); 
}

이 예제에서는 useRef 후크를 사용하여 formState 개체를 느리게 초기화합니다. 이렇게 하면 실제로 필요할 때까지 formState 개체의 생성을 연기하여 양식의 성능을 향상시킬 수 있습니다.

useRef 및 useCallback 후크 사용에 대한 모범 사례

useRef 및 useCallback 후크의 유용성을 최대화하려면 다음 권장 사례를 따르십시오.

  • DOM 요소에 액세스하고 시간 소모적인 계산을 최적화하려면 다음을 사용하십시오. useRef .
  • 다음을 사용하여 소품 전달 이벤트 핸들러 및 기타 메서드를 최적화합니다. useCallback .
  • 함수를 기억하고 자식 구성 요소를 두 번 렌더링하지 않으려면 다음을 사용하십시오. useCallback .
  • 디바운스를 사용하면 양식 성능을 향상하고 불필요한 업데이트를 방지할 수 있습니다.
  • 지연 초기화를 사용하여 값비싼 리소스가 실제로 필요할 때까지 기다리게 합니다.

이러한 모범 사례를 따르면 원활한 사용자 경험을 제공하고 React 앱의 성능을 향상시키는 빠르고 효율적인 구성 요소를 만들 수 있습니다.

React에서 양식 성능 최적화

useRef 및 useCallback 후크는 불필요한 재렌더링 및 업데이트를 줄여 양식의 성능을 향상시킬 수 있는 환상적인 도구입니다.

이러한 후크를 적절하게 활용하고 입력 디바운싱 및 비용이 많이 드는 리소스의 지연 초기화와 같은 모범 사례를 따르면 빠르고 효율적인 양식을 개발할 수 있습니다.