[UI] 툴팁 컴포넌트 (feat: UI 직접 만들기)

💡툴팁 컴포넌트란?

툴팁(Tooltip) 컴포넌트는 사용자가 인터페이스 요소에 마우스를 올리거나 초점을 맞출 때, 추가적인 정보를 제공하는 작은 팝업 창입니다. 일반적으로 짧고 유용한 설명이나 가이드를 보여주는 데 사용됩니다. 툴팁은 사용성 향상과 사용자 경험 개선에 중요한 역할을 합니다.

이 컴포넌트는 주로 다음과 같은 상황에서 사용됩니다.

• 아이콘 설명
• 축약된 정보의 확장
• 폼 필드의 도움말
• 버튼 또는 링크의 추가 정보

 

툴팁 컴포넌트를 위해 고민할 점

툴팁의 위치

툴팁 컴포넌트를 개발할 때, 기본적으로는 툴팁을 호출하는 부모컴포넌트에서 원하는 위치를 지정할 수 있도록 합니다. 하지만, 이렇게 호출된 툴팁이 스크롤에 가리거나 유저의 뷰포트에 보이지 않는 경우도 고려할 필요가 있다 생각합니다. 툴팁이 길어지는 경우나 화면의 구석에 렌더 될 가능성이 있다면 자동으로 위치조정을 하여 항상 화면에 노출하게 하는 것도 좋은 방법입니다.

트리거이벤트

툴팁에 트리거 이벤트를 어떻게 받을건지도 중요한 요소입니다. 대표적으로는 마우스 오버, 키보드포커스, 클릭 등의 방법이 있으며 기획적인 부분과 잘 고민하여 트리거를 정하는 것이 중요합니다.

저도 개발 당시 툴팁컴포넌트를 기존에 개발했던 콘텍스트메뉴 컴포넌트와 동일한 클릭 트리거로 개발한 적이 있었는데, 기획자와 생각이 달라 새로 툴팁컴포넌트를 개발했던 경험이 있습니다. 단순해 보이는 요소라도 약간의 소통을 통해서 두 번 작업하는 것을 막을 수 있으니, 이 부분도 함께 고민하고 넘어가는 것이 중요합니다.

한 번에 열리는 툴팁의 개수

만약 툴팁이 클릭 이벤트와 같은 트리거로 열리게 된다면 한 번에 여러개의 툴팁이 열려있는 상태도 존재할 수 있습니다. 이 부분도 기획자와 고민하여 애초에 여러개가 한번에 열릴지, 하나의 툴팁만 열릴지에 대한 로직도 고민하는 게 좋습니다.

📈구현해 보기

useExternalSync

useSyncExternalStroe는 리액트 외부 store를 구독하는 React Hook입니다. 저는 처음에 구독이란 단어가 어색하게 느껴졌는데, 구독을 값의 변화에 따라 리렌더를 일으키는 것이라고 이해하니 이 훅이 꽤 직관적이게 다가왔습니다.

외부 store라고 하면, redux, zustand 등이 있는데 사실 이러한 값들은 리액트 외부의 저장소이고, 돌이켜 생각해 보면 외부에 값들이 리액트의 리렌더링을 일으키는 게 낯설게 느껴집니다. 사실 이를 가능하게 하는 것이 useSyncExternal과 같은 훅입니다. zustand구현체 내부에도 useSyncExternalStoreWithSelector 이러한 함수들이 존재하는데, 외부에 저장된 값이 변경됐을 때 리렌더를 일으키는 코드임을 짐작할 수 있습니다.

useSyncExternalStore는 브라우저 API를 구독하는데도 유용하게 사용할 수 있습니다. 브라우저의 스크롤정보는 react에서 꾸준히 관리해야 하는 값이지만, 스크롤이 변한다고 리렌더를 일으키지는 않습니다. 이때, useSyncExternalStore를 사용한다면 스크롤을 구독하면서, 값이 변할 때마다 리렌더를 일으킬 수 있게 됩니다.

// getSnapShot 함수
/**
* getSnapShot 험수
* store의 데이터를 반환하는 함수입니다. store가 변경될 때마다 해당 함수가 실행되며 리액트에서는
* 이함수의 변환값을 Object.is르 비교하여 다를경우 리렌더를 발생시킵니다.
* 이 예제에서는 객체를 반환해도 리렌더를 방지하기위해 클로저를 활용했습니다. 
*/
const getViewportRect = () => {
  let stored: Rect = DefaultRect
  return () => {
    const elem = typeof document !== 'undefined' && document.scrollingElement
    if (!elem) return stored
    const { left, top, width, height } = elem.getBoundingClientRect()
    const newRect = { left, top, width, height, scrollHeight: elem.scrollHeight }
    if (newRect && !isSameRect(stored, newRect)) stored = newRect
    return stored
  }
}

/**
* store를 구독하는 함수입니다. subscribe는 스토어를 구독하는 함수와 구독을 취소하는 함수를 반환해야합니다.
* 또한 인자로 콜백함수를 제공하는데, 콜백함수를 스토어에 전달하여 스토어에 변경사항을 알 수 있도록 합니다.
*/
const subscribe = (callback: () => void) => {
  const resizeObserver = new ResizeObserver(callback)
  window.addEventListener('scroll', callback)
  resizeObserver.observe(document.body)
  return () => {
    window.removeEventListener('scroll', callback)
    resizeObserver.disconnect()
  }
}



  const viewportRect = useSyncExternalStore(subscribe, getViewportRect())

해당 코드는 현재 창의 변화를 감지하여 이것이 변했을 때, 리렌더를 일으키는 코드입니다. useExternalSync는 주의해야 할 점이 Primitive 한 값을 이용해야 합니다. 함수의 return 값을Object.is로 비교하고 달라지면, 리렌더를 일으키기 때문입니다. 하지만, 이 코드는 top, left, width, height 정보를 객체로 리턴하는데 이를 위해 클로저를 이용하는 점이 인상적이었습니다.

툴팁의 위치 계산 로직

const tooltipPosition = {
  top: '100%',
  bottom: 20,
  left: 0,
  right: 0,
}


const useStyleInView = (
  wrapperRef: RefObject<HTMLElement>,
  targetRef: RefObject<HTMLElement>,
  position: Position,
) => {
  const viewportRect = useViewportRect()
  const [style, setStyle] = useState<Style>({})

  useLayoutEffect(() => {
    if (!wrapperRef.current || !targetRef.current) return
    const wrapperRect = wrapperRef.current.getBoundingClientRect()
    const targetRect = targetRef.current.getBoundingClientRect()

    // "기준값". top은 top을 기준으로 아래로 보여주기. bottom은 위로 보여주기.
    const verticalKey =
      wrapperRect.bottom + targetRect.height < viewportRect.height ? 'top' : 'bottom'
    const horizontalKey =
      wrapperRect.right + targetRect.width < viewportRect.width ? 'left' : 'right'

    setStyle({
      [verticalKey]: position[verticalKey] || 0,
      [verticalKey === 'top' ? 'bottom' : 'top']: 'auto',
      [horizontalKey]: position[horizontalKey] || 0,
      [horizontalKey === 'left' ? 'right' : 'left']: 'auto',
    })
  }, [viewportRect, wrapperRef, targetRef, position])

  return style
}

툴팁의 위치를 계산해 주기 위해서는 화면 기준으로 위, 아래, 왼쪽, 오른쪽을 구해야 합니다.

위 / 아래는 현재 툴팁의 위치와 렌더링 될 툴팁의 높이가 총화면의 높이보다 작다면, 타깃요소 아래에(기본값) 크다면 타겟요소 위에 렌더 하도록 합니다.

좌 / 우도 마찬가지로, 타깃요소의 우측과 렌더링 될 툴팁의 길이가 화면의 넓이보다 넓다면 왼쪽, 아니라면 오른쪽입니다.

이렇게 작성하면 간단한 내용이지만 코드로 작성하려면 꽤나 신경 쓸 점이 많아 코드가 복잡해질 수 있습니다. 하지만, 강의를 보면서 computed property를 사용해서 깔끔하게 코드 작성을 한 게 인상적이었습다.

 

🎁 결과물