♻️ element ref를 위한 이펙트 로직들을 useRefEffect로 추출

Author: fecapark

src/components/Slack/SlackMessageItem/components/SlackMessageAttachment/SlackMessageYoutubeAttachment.tsx

@@ -1,11 +1,12 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
 import { FaYoutube } from 'react-icons/fa'
 
 import AutoHeightImage from '@/components/AutoHeightImage'
 import { SlackMessageAttachmentLayout } from '@/components/Slack/SlackMessageItem/components/SlackMessageAttachment/SlackMessageAttachmentLayout'
 import { MessageYoutubeAttachmentItem } from '@/types/schema'
+import { useRefEffect } from '@toss/react'
 
 interface SlackMessageYoutubeAttachmentProps {
   attachment: MessageYoutubeAttachmentItem
@@ -14,29 +15,26 @@ interface SlackMessageYoutubeAttachmentProps {
 export const SlackMessageYoutubeAttachment = ({
   attachment,
 }: SlackMessageYoutubeAttachmentProps) => {
-  const containerRef = useRef<HTMLDivElement>(null)
   const [playing, setPlaying] = useState(false)
 
-  useEffect(() => {
-    const container = containerRef.current
-    if (!container) {
-      return
-    }
+  const containerRef = useRefEffect<HTMLDivElement>(
+    (container) => {
+      const handleResize = () => {
+        const aspectRatio = attachment.thumbWidth / attachment.thumbHeight
+        const { width } = container.getBoundingClientRect()
+        const height = Math.floor(width / aspectRatio)
+        container.style.height = `${height}px`
+      }
 
-    const handleResize = () => {
-      const aspectRatio = attachment.thumbWidth / attachment.thumbHeight
-      const { width } = container.getBoundingClientRect()
-      const height = Math.floor(width / aspectRatio)
-      container.style.height = `${height}px`
-    }
+      window.addEventListener('resize', handleResize)
+      handleResize()
 
-    window.addEventListener('resize', handleResize)
-    handleResize()
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [attachment.thumbWidth, attachment.thumbHeight])
+      return () => {
+        window.removeEventListener('resize', handleResize)
+      }
+    },
+    [attachment.thumbWidth, attachment.thumbHeight]
+  )
 
   return (
     <SlackMessageAttachmentLayout>

src/hooks/useHover.ts

@@ -1,9 +1,10 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
+
+import { useRefEffect } from '@toss/react'
 
 export const useHover = <T extends HTMLElement = HTMLElement>() => {
-  const ref = useRef<null | T>(null)
   const [value, setValue] = useState<boolean>(false)
 
   const handleMouseEnter = () => {
@@ -13,20 +14,15 @@ export const useHover = <T extends HTMLElement = HTMLElement>() => {
     setValue(false)
   }
 
-  useEffect(() => {
-    const target = ref.current
-    if (!target) {
-      return
-    }
-
+  const ref = useRefEffect<T>((target) => {
     target.addEventListener('mouseenter', handleMouseEnter)
     target.addEventListener('mouseleave', handleMouseLeave)
 
     return () => {
       target.removeEventListener('mouseenter', handleMouseEnter)
       target.removeEventListener('mouseleave', handleMouseLeave)
     }
-  }, [ref])
+  }, [])
 
   return [ref, value] as const
 }