hook3 [web API] ResizeObserver: 크기변화 감지 [javascript] ResizeObserver vs resize event [react][event][resize][Dimensions] Resize event listener using React hooks Why do we need to use ResizeObserver? window는 resize event를 사용해 resize를 할 수 있다 window.addEventListener("resize", function() { // window resize시 처리 }) DOM은 window처럼 resize 이벤트를 사용해 size 변화를 감지할 수 없다. ResizeObserver를 사용한 react hook을 만들어 보자 import { useEffect, useState, useRef } fr.. 2023. 4. 14. [React] useId():: 컴포넌트 별 고유한 아이디 생성 import { useId } from 'react-id-generator'; function List({ items }) { const id = useId(); return ( {items.map((item, index) => ( {item} ))} ); } function App() { const items = ['Item 1', 'Item 2', 'Item 3']; return ; } 2023. 4. 8. [event] window.matchMedia - mobile detecting: 모바일 확인 하기 + React Hook 1. javascript window.innerWidth and window.innerHeight: to get size of mobile device navigator.userAgent : To check if a device is a mobile device function isMobileDevice() { const userAgent = navigator.userAgent; return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent); } function getScreenSize() { const width = window.innerWidth || document.documentElement.client.. 2023. 4. 6. 이전 1 다음
