[React.js] 마우스 호버 효과를 적용하기 위한 커스텀 훅 만들기 (useHover.js)

마우스 호버 효과를 적용하기 위한 커스텀 훅 만들기 (useHover.js)

들어가며

• 요소 위에 마우스 커서를 호버 시, 효과가 작동할 수 있도록 커스텀 훅을 만들어보자.

 

방법

기존의 방법

• 커스텀 훅을 사용하지 않을 경우, mouseover, mouseout에 대한 각각의 이벤트 핸들러 함수를 만들어서 마우스 호버 효과를 적용시키고 싶은 대상에 연결해 주는 방식으로 구현할 수 있었다.

			
			
			
		
import React, { useState } from react;
 
const MyComponent = () => {
    const [isHovered, setIsHovered] = useState(false);
 
	const handleMouseOver = () => {
	    setShowPopup(true);
	};
 
	const handleMouseOut = () => {
	    setShowPopup(false);
	};
    
    return (
        <div onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
          {isHovered ? 'Hovered!' : 'Not hovered'}
        </div>
    );
}
 
export default MyComponent;

 

커스텀 훅 (useHover.js)

• 커스텀 훅을 만들어서 일일히 이벤트 핸들러 함수를 만들어서 연결해줄 필요 없이 요소에 호버 효과를 적용시킬 수 있다.

			
			
			
		
import { useCallback, useEffect, useState, useRef } from 'react';
 
const useHover = () => {
	const [isHovered, setIsHovered] = useState(false);
	const ref = useRef(null);
 
	const handleMouseOver = useCallback(() => setIsHovered(true), []);
	const handleMouseOut = useCallback(() => setIsHovered(false), []);
 
	useEffect(() => {
		const element = ref.current;
		if (!element) return;
 
		element.addEventListener('mouseover', handleMouseOver);
		element.addEventListener('mouseout', handleMouseOut);
 
		return () => {
			element.removeEventListener('mouseover', handleMouseOver);
			element.removeEventListener('mouseout', handleMouseOut);
		};
	}, [handleMouseOver, handleMouseOut]);
 
	return [ref, isHovered];
};
 
export default useHover;

 

 

사용 방법

• const [hoverRef, isHovered = useHover() 코드를 작성한다.
• mouseover 속성과 mouseout 속성을 적용시키고 싶은 요소에 ref 속성을 주어, hoverRef를 넘겨준다.
  • 이제 이 요소 위에 마우스 커서를 올릴 경우, isHovered 상태가 업데이트 된다.

			
			
			
		
import React from 'react';
import useHover from './useHover';   // useHover.js 파일 경로에 맞게 수정
 
const MyComponent = () => {
  const [hoverRef, isHovered] = useHover();
 
  return (
    <div ref={hoverRef}>
      {isHovered ? 'Hovered!' : 'Not hovered'}
    </div>
  );
};
 
export default MyComponent;

 

적용 예

• 이제 다음과 같이 커스텀 훅을 불러와서 간단한 코드만을 삽입함으로써 마우스 호버 효과를 줄 수 있다.

			
			
			
		
import React from 'react';
import { observer } from 'mobx-react';
 
import * as S from '../playList/PlayListPage.style';
import Image from '../../../components/image/Image';
import ContentsPopUp from '../../../components/contentsPopUp/ContentsPopUp';
import useHover from '../../../hooks/useHover';
 
const Contents = observer(({ contents }) => {
	const { uuid, title, tags, thumbnailPath, id } = contents;
	const [hoverRef, isHovered] = useHover();
 
	console.log(uuid, tags, id);
 
	return (
		<S.ContentsBox className={'active'} ref={hoverRef} showPopUp={isHovered}>
			<Image alt={title} custom={S.Thumbnail} srcArray={[thumbnailPath]} />
 
			{isHovered && <ContentsPopUp contents={contents} showPopup={isHovered} />}
		</S.ContentsBox>
	);
});
 
export default Contents;