[React] react-bootstrap을 이용한 popover 구현하기

react 프로젝트 도중 이미지 hover popover 구현을 위해 서치를 하다가 react-bootstrap을 발견하였다.

❓react-bootstrap

bootstrap을 react에서도 사용할 수 있는 것

1. 설치

npm install react-bootstrap bootstrap --save

2. import

먼저, bootstrap css를 사용하기 위해서는 내장되어있는 css를 임포트해야한다.

import 'bootstrap/dist/css/bootstrap.min.css';

그 다음으로 사용하고자 하는 요소들을 임포트해준다. (Popover, OverlayTrigger, Image)

import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Image from 'react-bootstrap/Image';

3줄은 너무 긴 것 같다. 한줄로 압축시켜보자.

import { Popover, OverlayTrigger, Image } from 'react-bootstrap';

3. Popover로 보여줄 메시지

popover로 보여줄 메시지를 정의한다.

// popover 메시지
const popover = (
   <Popover className="popover">
      <Popover.Content>
         레벨은 글 작성시 20%, 댓글 작성시 5% 상승합니다!
      </Popover.Content>
   </Popover>
);

4. Popover 메시지를 발생시킬 이미지

마우스를 가져다 댈(hover) 이미지를 정의한다.

<OverlayTrigger
   trigger={["hover", "hover"]}
   placement="bottom"
   overlay={popover}
>
   <Image
      className="QuestionPopover"
      src="/images/question.png"
      alt="question"
   />
</OverlayTrigger>

placement에는 popover가 나오는 위치를 정할 수 있다.(top, bottom, left, right ... )
overlay에는 위에서 작성한 popover메시지를 정의한 변수를 넣어준다.
trigger에는 이미지를 클릭했을 때 popover를 발생시킬 것인지, 마우스를 가져다댔을 때 발생시킬 것인지를 명시해준다.

{["hover", "hover"]} 라고 적은 이유는

그냥 trigger="hover"라고 적었을 때 이런 Warning이 발생하였다.
인터넷에 검색을 해보니 {["hover", "hover"]} 이렇게 적으면 코드가 중복된 값이 아니라고 가정을 하여 hover로 제대로 인식한다고 한다. 나도 무슨말인지는 정확히는 이해가 가지 않는다🙄
어쨋든 저렇게 적어주면 위의 Warning은 사라진다. 일단 빨간색이 사라졌으니 안심^^

모든 코드 작성 끝

🎉실행 결과

실행을 시켜보면

마우스를 가져다댔을 때 잘 나오는 것을 확인할 수 있다.