React.forwardRef()는 React에서 제공하는 기능 중 하나로, Ref를 전달하기 위해 사용됩니다. 이 기능을 활용하여 컴포넌트의 툴팁(Tooltip) 기능을 간단하게 구현할 수 있습니다.

툴팁은 보통 마우스를 특정 요소 위에 올렸을 때 나타나는 작은 정보 창으로, 사용자에게 추가적인 설명이나 도움을 제공하는 역할을 합니다. 이제 React.forwardRef()를 사용하여 툴팁 컴포넌트를 만들어보겠습니다.

1. 툴팁 컴포넌트 생성

툴팁 컴포넌트는 매우 간단한 예제로서, 마우스를 올린 요소 위에 툴팁이 나타나도록 구현될 것입니다. 다음은 간단한 툴팁 컴포넌트의 예시 코드입니다:

import React, { forwardRef } from 'react';

const Tooltip = forwardRef((props, ref) => {
  const { text, children } = props;
  
  return (
    <div ref={ref}>
      {children}
      <span className="tooltip">{text}</span>
    </div>
  );
});

export default Tooltip;

위 코드에서는 forwardRef()를 사용하여 TextTooltip 컴포넌트를 생성하였습니다. forwardRef()에 전달된 콜백 함수는 props와 ref를 인자로 받아와 사용합니다. ref는 툴팁 요소의 참조를 가리키게 됩니다.

툴팁 컴포넌트에서는 children과 text를 props로 받아와 자식 요소를 툴팁과 함께 렌더링합니다. 툴팁 스타일링은 .tooltip 클래스를 이용하여 구현할 수 있습니다.

2. 툴팁 사용하기

이제 툴팁 컴포넌트를 실제로 사용해봅시다. 다음은 툴팁이 적용될 요소에 마우스를 올렸을 때 툴팁이 나타나도록 구현한 예시 코드입니다:

import React, { useRef } from 'react';
import Tooltip from './Tooltip';

const App = () => {
  const tooltipRef = useRef(null);

  return (
    <div>
      <h1>툴팁 예제</h1>
      <Tooltip ref={tooltipRef} text="이것은 툴팁입니다.">마우스를 올려보세요.</Tooltip>
    </div>
  );
};

export default App;

위 예시 코드에서는 Tooltip 컴포넌트를 App 컴포넌트에서 사용하였습니다. tooltipRef라는 Ref 객체를 생성하여 ref 속성에 전달하였습니다.

이제 프로젝트를 실행하고 마우스를 툴팁이 적용된 요소 위에 올려보면, 툴팁이 나타나는 것을 확인할 수 있습니다.

React.forwardRef()를 활용하여 간단한 툴팁 컴포넌트를 구현하는 방법에 대해 알아보았습니다. 만약 더 복잡한 툴팁 기능을 구현하고 싶다면, React의 Ref 기능에 대해 더 자세히 공부해보시기 바랍니다.

#React #툴팁