[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;