React Hooks 2: useMemo, useCallback, useLayoutEffect, useImperativeHandle, useDebugValue & Custom Hooks
더 자주 보게 될 것은 Custom Hooks이므로 다른 것들에 별로 관심이 없다면 끝까지 건너뛰어 제 프로젝트 중 하나에서 사용하고 있는 예를 확인하세요.
6. useCallback과 7. useMemo는 둘 다 성능을 최적화한다는 점에서 비슷합니다. 성능 문제가 발생할 때 사용해야 하며 그 전에는 사용하지 않아야 합니다. 그렇지 않으면 애플리케이션이 불필요하게 복잡해집니다.
사용메모
값비싼 함수 호출을 메모하여 필요할 때만 계산합니다. useMemo는 메모된 값을 반환합니다.
콜백 사용
언급했듯이 useMemo와 매우 유사하지만 useCallback은 메모된 함수를 반환합니다.
useLayoutEffect
이것은 useEffect와 실제로 유사하며 거의 동일합니다. 유일한 차이점은 useEffect와 같이 예약된 렌더링 대신 동기식 렌더링이라는 것입니다. 예를 들어 클래스 구성 요소에서 후크로 마이그레이션하는 경우 componentDidMount 및 componentDidUpdate와 동시에 실행되므로 useEffect가 나중에 실행되므로 매우 유용할 수 있습니다. 이것은 임시 수정이어야 하며 사용해야 하는 유일한 시간은 예를 들어 애니메이션의 경우 DOM 노드를 측정하는 것입니다.
useImperativeHandle
이것은 당신이 이것을 사용하지 않을 수도 있지만, 당신이 사용하는 일부 라이브러리에 있거나 정말 드문 시나리오를 다룰 수 있습니다.
useImperativeHandle은 useRef와 매우 유사합니다. 이를 사용하면 ref가 연결된 구성 요소의 인스턴스 값이 제공되므로 DOM 요소와 직접 상호 작용할 수 있습니다.
useImperativeHandle은 매우 유사하지만 인스턴스 요소 대신 반환되는 값을 제어할 수 있도록 하며 반환 값을 명시적으로 지정합니다. 또한 흐림 또는 초점과 같은 기본 기능을 자신의 기능으로 대체할 수 있습니다.
useDebugValue
이 후크는 React DevTools의 구성 요소 검사기 내부에 있는 사용자 지정 후크에 대한 데이터의 시각화를 확장합니다. here은 이에 대한 Chrome 확장이고 here은 npm 패키지 설치입니다.
보너스: 커스텀 후크
로직을 재사용 가능한 함수로 추출하는 고유한 후크를 빌드할 수도 있습니다.
논리를 추출하여 후크에 넣으려면 위와 이전 게시물에서 본 것처럼 이름이 "use"라는 단어로 시작하는 JS 함수임을 기억하십시오.
다음은 내 projects 중 하나에서 만든 사용자 지정 후크이며 7초 후에 다른 카드를 표시하기 위해 추천 회전판에 사용했습니다.
import React, { useState, useEffect, useRef } from "react";
export default function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
읽어주셔서 감사합니다. 시간 내주셔서 감사합니다. 도움이 필요하시면 연락주세요!
질문이 있으시면 언제든지 저에게 메시지를 보내시거나 email로 보내주십시오. 😊
좋은 하루 되세요!
Reference
이 문제에 관하여(React Hooks 2: useMemo, useCallback, useLayoutEffect, useImperativeHandle, useDebugValue & Custom Hooks), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/carolinacobo/react-hooks-2-usememo-usecallback-uselayouteffect-useimperativehandle-usedebugvalue-custom-hooks-2il4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)