[React][라이브러리 소개] react-resize-detector

# react-resize-detector 를 활용한 리사이즈 이벤트 처리 

- <div>와 같은 HTML Element의 사이즈가 바뀔 때 변경된 사이즈에 대해 대응할 필요가 있을 때가 있습니다.  본 포스팅에서는 react-resize-detector라는 라이브러리르 사용해서 HTML Element 크기 변경 이벤트를 처리하는 방법을 소개 하려고 합니다

 

# 사용방법

- 라이브러리를 설치해 줍니다

yarn add react-resize-detector

 

- 아래와 같이 구현해 주시면 됩니다

import { useResizeDetector } from 'react-resize-detector';

const CustomComponent = () => {
  const { width, height, ref } = useResizeDetector();
  return <div ref={ref}>{`${width}x${height}`}</div>;
};

 

- 퍼포먼스 최적화를 위해서는 아래와 같이 쓰는 것을 추천해 주고 있습니다. 참고하시면 좋을 것 같습니다

// CORRECT - `useCallback` approach
const onResize = useCallback(() => {
  // on resize logic
}, []);

const { ref, width, height } = useResizeDetector({ onResize });

 

 

---