[React 성능 최적화] react-tooltip 성능 이슈 해결

성능 최적화를 진행하며 react-tooltip이 매우 느리게 렌더링 되는 것을 확인했습니다.

검색해보니 관련된 이슈가 있었습니다. https://github.com/ReactTooltip/react-tooltip/issues/334

ReactTooltip renders very slow when used many time on the same page · Issue #334 · ReactTooltip/react-tooltip

해당 이슈는 이미 해결된 이슈로 공식 페이지의 트러블슈팅에서 내용을 찾아볼 수 있습니다.

https://react-tooltip.com/docs/troubleshooting#bad-performance

 

정리하자면 react-tooltip 컴포넌트를 루트 레벨 하나에 두고 사용해야 한다는 것입니다. 링크의 두 예시를 보면 다음과 같습니다.

// ❌ BAD
<div className="items-container">
  {myItems.map(({ id, content, tooltip }) => (
    <div key={id} className="item" data-tooltip-id={`tooltip-${id}`}>
      {content}
      <Tooltip id={`tooltip-${id}`} content={tooltip} />
    </div>
  ))}
</div>

// ✅ GOOD
<div className="items-container">
  {
    myItems.map(({ id, content, tooltip }) => (
      <div
        key={id}
        className="item"
        data-tooltip-id="my-tooltip"
        data-tooltip-content={tooltip}
      >
        {content}
      </div>
    ))
  }
</div>
<Tooltip id="my-tooltip" />

 

두 번째 방법처럼 툴팁 하나를 두고, 콘텐츠만 동적으로 바꿔야 성능 저하 없이 react-tooltip을 사용할 수 있다는 내용입니다. 저는 앱 전체에서 툴팁이 필요해 라우터에 툴팁 컴포넌트를 두도록 수정해서 문제를 해결했습니다.