React-Tooltip 사용하기

도서 관리 프로젝트에서 공통적인 4개 항목들을 개별적으로 변경해야 하는 작업을 맡게 되었습니다. 일반적으로 이러한 변경 작업은 모델 창을 사용하여 수행됩니다. 그러나, 모델 창을 통해 데이터를 하나씩 수정하는 방식은 사용자 경험을 저하시키고 작업 효율성을 떨어뜨릴 수 있습니다. 이 문제를 해결하기 위해, 더 가벼운 대안으로 툴팁을 활용해 보았습니다. 

 

 

1. React-Tooltip 개념과 사용

---

[ React-Tooltip 이란? ]

툴팁은 사용자에게 필요한 정보를 간결하고 직관적으로 제공할 수 있는 도구로, 쉽게 말해 말풍선이나 복잡한 UI를 단순화하고 사용자가 더 쉽게 접근할 수 있게 도와줍니다. 특히, React-tooltip 라이브러리를 사용하면 툴팁을 간편하게 구현하고 데이터 수정 작업을 보다 유연하고 효율적으로 처리할 수 있습니다. 

출처 -https://react-tooltip.com/

 

[ React-Tooltip 설치 ]

npm install react-tooltip

 

 

개발환경 : React 18, react-tooltip 4

[ React-Tooltip 사용 ]

import React, { Component } from "react";
import ReactTooltip from "react-tooltip";

export default class App extends Component {
  render() {
    return (
      <div>
        <a data-for="enrich" data-tip>(❂‿❂)</a>
        <ReactTooltip
            id="enrich"
            getContent={dataTip => "This little buddy is " + dataTip}
        />
       </div>
    );
  }
}

위 코드를 차근차근 설명하면, ReactTooltip 라이브러리를 import 통해 가져옵니다. 툴팁을 발생시키기 위해 화면에 내용이 정의되어 있어야 하는데, 위 코드에서는 "(❂‿❂)" 귀여운 표정이 정의되어 있습니다. data-for 속성은 툴팁과 연결하는 통로로 data-for == ReactTooltip.id 값이 일치되어야 연결이 됩니다. data-tip 속성은 툴팁이 트리거가 될 수 있게 해주는 속성입니다. 마지막으로 getContent 속성은 툴팁에 표시될 내용입니다. 이처럼 귀여운 표정에 마우스 커서를 갖다 대면 툴팁 내용이 출력되는 걸 볼 수 있습니다.

 
 

---

지금까지 툴팁의 기본적인 사용법은 알아보았습니다.
이제 툴팁을 응용하여 도서 관리 시스템에 적용시켜보겠습니다!

도서 목록은 AG-Grid 라이브러리 적용된 상태

요구사항은 다음과 같습니다.

1. "저자"에서 변경을 클릭하면 오른쪽에 툴팁 생성
2. "지은이, 퍼낸이, 엮은이, 옮긴이" 4개 항목 개별적으로 변경

 

1.  "저자"에서 변경을 클릭하면 오른쪽에 툴팁 생성

---

/* 변경 버튼 */
cellTooltipBtn = () => {
    return (
      <button>변경</button>
    );
};

cellTooltipBtn() 함수는 저자의 변경 버튼을 렌더링하는 함수입니다. 변경 버튼을 클릭했을 때 툴팁이 생성되어야 하므로 이 함수에 툴팁을 추가해보겠습니다.

/* 변경 버튼 + 툴팁 */
cellTooltipBtn = () => {
    return (
      <>
        <button 
            data-tip 
            data-for="author"
            onMouseOver={() => ReactTooltip.rebuild()} >
          변경
        </button>
        
        // 툴팁 생성
        <ReactTooltip 
            event="click" 
            place="right" 
            type="dark" 
            effect="solid" 
            id="author">
          <div className="tooltip-container" />  
        </ReactTooltip>
      </>
    );
};

툴팁은 <ReactTooltip> 컴포넌트를 사용하여 생성되며, 버튼과 툴팁은 data-for 및 id 속성을 통해 연결됩니다. button과 ReactTooltip 정의된 속성들을 하나하나 알아보겠습니다.
<button> 요소

• data-tip: ReactTooltip과 연결하여 툴팁을 트리거하는 속성
• data-for:  button 컴포넌트 ID를 지정
• onMouseOver: 버튼 위로 마우스를 올렸을 때 툴팁 렌더링

<ReactTooltip> 요소

• event="click": 클릭 이벤트로 활성화
• place="right": 위치를 오른쪽에 툴팁이 표시
• type="dark": 색상 테마를 어두운 배경 설정
• effect="solid": 툴팁 영역을 고정적으로 사용할 수 있도록 설정
• id="author": ReactTooltip 컴포넌트의 ID

위 코드를 실행하면 아래와 같이 변경 버튼 클릭 시 오른쪽에 툴팁이 생성이 됩니다.

 

삽질했던 부분

1. 변경 버튼을 2번 클릭해야 툴팁 나오는 문제
초반에 공식 문서를 보고 설정했는데 변경 버튼을 2번 눌러야 툴팁이 생기는 문제점이 있었습니다. 원인은 AG-Grid 컴포넌트 안에 변경 버튼을 눌렀을 때 일차적으로 툴팁의 event가 실행되지 않았습니다. 이 문제를 해결하기 위해서 구글링을 엄청했다... 버그인지 오류인지 내 실수인지.. 공식 문서를 보니깐 react-tooltip 4 버전은 동적 콘텐츠와 함께 사용할 때 툴팁을 다시 빌드를 하기 위해 ReactTooltip.rebuild() 해줘야 한다고 나와있습니다. 그래서 마우스 커서가 변경 버튼으로 갔을 때 툴팁을 빌드한 다음, 버튼을 클릭했을 때 툴팁의 event를 실행하여 2번 클릭해야 하는 문제를 해결하였습니다.

onMouseOver={() => ReactTooltip.rebuild()}

 
 
2. 툴팁 height 일부 안 보이는 문제

툴팁 height 사이즈가 변동되어 위 사진처럼 일부 안 보이는 문제점이 있었습니다. 원인은 AG-Grid 안에 cellTooltipBtn( ) 함수 안에 툴팁을 생성하고 있어서 AG-Grid 창에서 툴팁 창이 자식이 되어 height 사이즈가 변동되는 것을 확인하였습니다. 즉, AG-Grid 창이 부모이기 때문에 자식인 툴팁 CSS height 값이 변하는 것이었습니다. 그래서 부모/자식 관계를 분리해 주기 위해 툴팁 코드를 cellTooltipBtn() 함수 안에 있던 코드를 render( ) 안에서 실행시키도록 하였습니다.

/* 변경 버튼 */
cellTooltipBtn = () => {
    return (
        <button  
            data-tip 
            data-for="author"
            onMouseOver={() => ReactTooltip.rebuild()}>
          변경
        </button>
    );
};

render() {
    return (
      <div>
        ...

        // 기존 cellTooltipBtn() -> render() 분리
        <ReactTooltip 
            event="click" 
            place="right" 
            type="dark" 
            effect="solid" 
            id="author">
          <div className="tooltip-container" />
        </ReactTooltip>
      </div>
    );

}

이렇게 두 번째 문제인 AG-Grid 인해서 툴팁 height 사이즈 변동이 되어서 일부 공간이 안 보이는 문제를 해결하였습니다!
 
 
 

2. "지은이, 퍼낸이, 엮은이, 옮긴이" 4개 항목 개별적으로 변경

---

각 도서의 저자 관련 정보(지은이, 퍼낸이, 엮은이, 옮긴이)를 개별적으로 변경할 수 있는 툴팁을 제공하는 컴포넌트를 구현해 보겠습니다. 구현 방법은 아래 코드와 같습니다.

코드

// 툴팁 컴포넌트
<ReactTooltip event="click" className="author-tooltip" place="right" type="dark" effect="float" clickable={true} isCapture={true} id="author">
  <div className="tooltip-container">
    <div className="tooltip-header">
      <label className="tooltip-title">개별 적용</label>
    </div>
    <div className="tooltip-field">
      <label>지은이</label>
      <input type="text" value={currentData.author} onChange={(e) => this.handleChange("author", e.target.value)} />
      <button className="tooltip-btn" onClick={() => this.saveChanges()}>변경</button>
    </div>
    <div className="tooltip-field">
      <label>펴낸이</label>
      <input type="text" value={currentData.publisher} onChange={(e) => this.handleChange("publisher", e.target.value)} />
      <button className="tooltip-btn" onClick={() => this.saveChanges()}>변경</button>
    </div>
    <div className="tooltip-field">
      <label>엮은이</label>
      <input type="text" value={currentData.editor} onChange={(e) => this.handleChange("editor", e.target.value)} />
      <button className="tooltip-btn" onClick={() => this.saveChanges()}>변경</button>
    </div>
    <div className="tooltip-field">
      <label>옮긴이</label>
      <input type="text" value={currentData.translator} onChange={(e) => this.handleChange("translator", e.target.value)} />
      <button className="tooltip-btn" onClick={() => this.saveChanges()}>변경</button>
    </div>
  </div>
</ReactTooltip>

코드를 요약하면 지은이, 퍼낸이, 엮은이, 옮긴이를 각각 개별적으로 변경을 수정할 수 있는 툴팁이 나타나며, 입력 필드의 값을 변경하면 해당 값이 상태에 반영됩니다. "변경" 버튼을 통해 최종적으로 저장할 수 있습니다. CSS 내용은 생략하겠습니다. 코드를 실행시키면 화면은 아래와 같습니다.

삽질했던 부분

1. saveChanges() 이벤트 함수가 동작하지 않는 문제
값을 변경했을 때 onclick event를 saveChanges() 함수로 정의했는데 이 안에서 이벤트가 발생하지 않는 문제점이 있었습니다. 원인은 React-Tooltip의 사용자 정의 이벤트가 false 기본 값으로 지정되어 있었습니다. 그래서 <ReactTooltip isCapture={true} /> 정의하여 이벤트를 실행할 수 있도록 하였습니다.
 
 
 
[출처]
npm react-tooltip  
React Tooltip - V4   
React Tooltip - Basic Example