Custom Hook을 활용한 유저 인터랙션 기능 구현

06 Nov 2023

reactjs

React에서 유저 인터랙션이 필요한 기능을 구현할 때, Custom Hook을 활용하면 코드의 재사용성을 높일 수 있습니다. Custom Hook은 React의 기본적인 훅들을 조합하여 원하는 기능을 담은 훅을 생성하는 것입니다. 이번 기사에서는 Custom Hook을 사용하여 유저 인터랙션 기능을 구현하는 방법을 알아보겠습니다.

1. Custom Hook 생성

먼저, 유저 인터랙션에 필요한 기능을 담은 Custom Hook을 생성합니다. 이 예제에서는 “useHover”라는 Custom Hook을 생성하여 마우스 호버 이벤트를 처리합니다. 아래는 “useHover” Custom Hook의 예시 코드입니다.

import { useState, useEffect } from 'react';

const useHover = () => {
  const [isHovered, setIsHovered] = useState(false);

  useEffect(() => {
    const handleMouseEnter = () => setIsHovered(true);
    const handleMouseLeave = () => setIsHovered(false);

    const element = document.getElementById('targetElement');
    element.addEventListener('mouseenter', handleMouseEnter);
    element.addEventListener('mouseleave', handleMouseLeave);

    return () => {
      element.removeEventListener('mouseenter', handleMouseEnter);
      element.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, []);

  return isHovered;
};

export default useHover;

2. Custom Hook 활용

이제, 위에서 생성한 “useHover” Custom Hook을 사용하여 유저 인터랙션 기능을 활용하는 컴포넌트를 구현해보겠습니다. 아래는 “HoverButton” 컴포넌트의 예시 코드입니다.

import React from 'react';
import useHover from './useHover';

const HoverButton = () => {
  const isHovered = useHover();

  return (
    <button id="targetElement" style={{ background: isHovered ? 'blue' : 'red' }}>
      {isHovered ? 'Hovered' : 'Not Hovered'}
    </button>
  );
};

export default HoverButton;

위의 코드에서는 “useHover” Custom Hook을 사용하여 버튼의 배경색을 마우스 호버 여부에 따라 변경하고, 버튼 위에 “Hovered” 또는 “Not Hovered” 텍스트를 표시합니다.

3. 컴포넌트 사용

마지막으로, “HoverButton” 컴포넌트를 다른 컴포넌트에서 사용하여 유저 인터랙션 기능을 사용할 수 있습니다. 아래는 “App” 컴포넌트의 예시 코드입니다.

import React from 'react';
import HoverButton from './HoverButton';

const App = () => {
  return (
    <div>
      <h1>Hover Button Example</h1>
      <HoverButton />
    </div>
  );
};

export default App;

위의 코드에서는 “App” 컴포넌트에서 “HoverButton” 컴포넌트를 렌더링하여 유저 인터랙션 기능을 사용합니다.

마무리

위의 예시에서는 마우스 호버 이벤트를 처리하기 위한 Custom Hook을 생성하고, 이를 컴포넌트에서 활용하는 방법을 소개했습니다. Custom Hook을 활용하면 유저 인터랙션 기능뿐만 아니라 다양한 기능을 구현할 수 있으며, 코드의 재사용성과 가독성을 향상시킬 수 있습니다.

#React #CustomHook