많은 웹 페이지나 애플리케이션에서 툴팁 기능은 매우 유용합니다. 사용자가 요소 위로 마우스를 이동하면 해당 요소에 대한 추가 정보를 제공할 수 있습니다. 이번 기술 블로그에서는 React에서 Custom Hook을 사용하여 간단한 툴팁 기능을 추가하는 방법을 알아보겠습니다.

Custom Hook 구현하기

Custom Hook을 사용하면 툴팁을 보여주는 로직을 재사용할 수 있습니다. 아래의 useTooltip Custom Hook을 구현해봅시다.

import { useState } from 'react';

const useTooltip = () => {
  const [showTooltip, setShowTooltip] = useState(false);
  
  const toggleTooltip = () => {
    setShowTooltip(!showTooltip);
  }
  
  return {
    showTooltip,
    toggleTooltip
  };
};

export default useTooltip;

위의 코드에서 useTooltip Hook은 showTooltip과 toggleTooltip을 반환합니다. showTooltip은 툴팁이 보여지는지 여부를 나타내는 상태입니다. toggleTooltip 함수는 툴팁의 보여짐/숨김 상태를 토글합니다.

툴팁 컴포넌트 만들기

이제 Custom Hook을 사용하여 툴팁 컴포넌트를 만들어봅시다.

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

const Tooltip = ({ content, children }) => {
  const { showTooltip, toggleTooltip } = useTooltip();
  
  return (
    <div onMouseEnter={toggleTooltip} onMouseLeave={toggleTooltip}>
      {children}
      {showTooltip && <div className="tooltip">{content}</div>}
    </div>
  );
};

export default Tooltip;

위의 코드에서 Tooltip 컴포넌트는 content와 children을 받습니다. useTooltip Hook을 사용하여 showTooltip과 toggleTooltip을 받아옵니다. onMouseEnter와 onMouseLeave 이벤트 핸들러를 통해 툴팁을 보여주거나 숨길 수 있습니다.

툴팁 사용하기

이제 Tooltip 컴포넌트를 사용하여 원하는 요소에 툴팁 기능을 추가할 수 있습니다. 아래는 예시입니다.

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

const App = () => {
  return (
    <div>
      <h1>Custom Hook을 사용한 툴팁 기능 추가</h1>
      <Tooltip content="이것은 툴팁입니다.">
        <button>툴팁 보기</button>
      </Tooltip>
    </div>
  );
};

export default App;

위의 코드에서 Tooltip 컴포넌트는 content prop으로 툴팁의 내용을 받고, 자식 요소인 button을 감싸고 있습니다. button을 감싼 요소에 마우스를 올리면 툴팁이 나타납니다.

마무리

이렇게 Custom Hook을 사용하여 React에서 툴팁 기능을 추가하는 방법을 알아보았습니다. Custom Hook을 사용하면 로직을 재사용하여 코드를 깔끔하게 유지할 수 있습니다. 이러한 패턴을 활용하여 다양한 커스텀 기능을 만들어보세요!

#React #CustomHook