useRef , mouseOver, mouseOut 예시

const ImgToggle=({primaryImg, secondaryImg})=>{
    const imgRef = useRef(null);

    return(
      <img className="tgimg"
        onMouseOver={()=>{ imgRef.current.src = secondaryImg;}}
        onMouseOut={()=>{imgRef.current.src = primaryImg;}}
        src = {primaryImg} alt ="" ref ={imgRef} 
      />
    )
  }  

ImgToggle 컴포넌트는 이미지가 마우스 오버 시 (primary 이미지에서 secondary 이미지로) 변경되고, 마우스가 벗어났을 때 다시 원래 이미지(primary 이미지)로 돌아오는 기능을 구현한 React 함수형 컴포넌트다.

Props (primaryImg, secondaryImg)

• primaryImg: 초기 상태에서 표시될 기본 이미지의 URL.
• secondaryImg: 마우스가 이미지 위에 올라갔을 때 변경될 이미지의 URL.

useRef

useRef(null)는 참조 객체를 생성하는 훅이다.
여기서는 img 태그에 접근할 수 있도록 참조를 생성하여 imgRef라는 변수에 할당하고 있다. imgRef는 current 속성을 통해 해당 img 요소에 접근할 수 있게 된다.

onMouseOver 이벤트

마우스가 이미지 위로 올라갈 때 실행된다.
이때, imgRef.current.src 값을 secondaryImg로 변경하여 마우스 오버 시 이미지를 교체합니다.

onMouseOut 이벤트

마우스가 이미지에서 벗어날 때 실행된다.
이때, imgRef.current.src 값을 다시 primaryImg로 되돌려 원래 이미지로 복원합니다.

ref={imgRef}는 해당 img 요소에 대한 참조를 useRef로 연결해줍니다.

코드에 대한 전체적인 동작:
사용자가 이미지에 마우스를 올리면 (onMouseOver), 이미지가 secondaryImg로 변경된다. 마우스가 이미지에서 벗어나면 (onMouseOut), 다시 primaryImg로 돌아온다.