useResize 커스텀 훅

const useResize= (handler) => {
	const ref = useRef(null)
	const savedHandler = useRef(handler)

	useEffect(()=>{
		savedHandler.current = handler //핸들러 바뀌면 여기서..
	},[handler])

	useEffect(()=>{
			const element = ref.current
			if (!element) return

			const observer = new ResizeObserver((entries)=>{
			savedHandler.current(entries[0].contentRect)
			})//등록한 요소(여기선 하나)의 사이즈를 핸들러의 매개변수로 넘겨줌
			
			observer.observe(element) //해당 요소 리사이즈 관리

			return () => {
				observer.disconnect()
			}
	},[ref]) //핸들러는 ref로 관리했기 때문에 핸들러가 바뀌어도 이 훅은 실행되지 않음 => 절약

	return ref;
}

const [size, setSize] = useState({width: 0, height:0})
const ref= useResize((elemSize)=>{
	setSize({width: elemSize.width, height: elemSize.height})
})

<Background ref={ref}>
	<Image 
		width={size.width}
		height={size.height}
		src=""
		mode=""
	/>
</Background>