[Next.js] 라이브러리 React-share를 이용한 공유 구현

React-share에 대해

웹개발을 하다보면 공유 버튼을 구현할 일이 많다. 한 명이라도 공유를 해주면 파급효과가 좋으니까 포기할 수 없다. 그런 공유 버튼을 만들기 쉽게 도와주는 라이브러리가 있는데 그게 바로 react-share이다.

react-share npm사이트 참고

react-share를 사용하면 정말 수십가지의 공유기능이 한번에 구현되어있다. 핀터레스트, 페이스북, 라인, 텀블러, 트위터는 물론 왓츠앱, 텔레그램까지 그 외에도 많은 서비스에 바로 공유할 수 있게 해준다. 사용자는 React-share로 만들어진 버튼을 클릭하기만 하면 자동으로 딥링크를 통해 연결된다. 구현할 수 있는 버튼의 리스트이다.

  import {
    EmailShareButton,
    FacebookShareButton,
    GabShareButton,
    HatenaShareButton,
    WhatsappShareButton,
    WorkplaceShareButton,
    RedditShareButton,
    TelegramShareButton,
    TumblrShareButton,
    TwitterShareButton,
    ViberShareButton,
    VKShareButton,
    InstapaperShareButton,
    LineShareButton,
    LinkedinShareButton,
    PocketShareButton,
    LivejournalShareButton,
    MailruShareButton,
    OKShareButton,
    PinterestShareButton,
  } from "react-share";

정말 많다. 근데 이 버튼들을 보면 각 버튼별로 넣어줘야하는 프롭스가 다르다. 예를들면 페이스북 같은 경우엔 hashtag라는 프롭스를 넣을 수 있는데 그 설명을 보면,

  hashtag (string): 개발자가 공유 콘텐츠에 추가하기 위해 지정한
  해시태그다. 사람들은 공유를 위한 대화 상자에서 이 해시태그를 삭제할 수 있다.
  해시태그에는 해시#, 우물정자가 포함되어야 한다.

라고 되어있다. 이렇게 개발 친화적으로 되어있긴 하고 설명도 있으나 다만 단점은, 이게 너무 많아서 구현하는데 귀찮다는 것이다. 그래서 내가 만든 예제코드를 여기 첨부하니 복사붙여넣기로 사용하길 바란다.

바로 사용할 수 있는 에제코드

  <FacebookShareButton url={url} style={modalStyles.shareButton}>
  <FacebookIcon size={iconSize} round />
  </FacebookShareButton>
  <LineShareButton url={url} style={modalStyles.shareButton}>
    <LineIcon size={iconSize} round />
  </LineShareButton>
  <PinterestShareButton
    url={url}
    media={pinterestMediaUrl}
    style={modalStyles.shareButton}
  >
    <PinterestIcon size={iconSize} round />
  </PinterestShareButton>
  <RedditShareButton url={url} style={modalStyles.shareButton}>
    <RedditIcon size={iconSize} round></RedditIcon>
  </RedditShareButton>
  <TelegramShareButton url={url} style={modalStyles.shareButton}>
    <TelegramIcon size={iconSize} round></TelegramIcon>
  </TelegramShareButton>
  <TumblrShareButton url={url} style={modalStyles.shareButton}>
    <TumblrIcon size={iconSize} round></TumblrIcon>
  </TumblrShareButton>
  <TwitterShareButton url={url} style={modalStyles.shareButton}>
    <TwitterIcon size={iconSize} round></TwitterIcon>
  </TwitterShareButton>
  <ViberShareButton url={url} style={modalStyles.shareButton}>
    <ViberIcon size={iconSize} round></ViberIcon>
  </ViberShareButton>
  <WeiboShareButton url={url} style={modalStyles.shareButton}>
    <WeiboIcon size={iconSize} round></WeiboIcon>
  </WeiboShareButton>
  <WhatsappShareButton url={url} style={modalStyles.shareButton}>
    <WhatsappIcon size={iconSize} round></WhatsappIcon>
  </WhatsappShareButton>
  <LinkedinShareButton url={url} style={modalStyles.shareButton}>
    <LinkedinIcon size={iconSize} round></LinkedinIcon>
  </LinkedinShareButton>
  <VKShareButton url={url} style={modalStyles.shareButton}>
    <VKIcon size={iconSize} round></VKIcon>
  </VKShareButton>
  <MailruShareButton url={url} style={modalStyles.shareButton}>
    <MailruIcon size={iconSize} round></MailruIcon>
  </MailruShareButton>
  <LivejournalShareButton url={url} style={modalStyles.shareButton}>
    <LivejournalIcon size={iconSize} round></LivejournalIcon>
  </LivejournalShareButton>
  <WorkplaceShareButton url={url} style={modalStyles.shareButton}>
    <WorkplaceIcon size={iconSize} round></WorkplaceIcon>
  </WorkplaceShareButton>
  <PocketShareButton url={url} style={modalStyles.shareButton}>
    <PocketIcon size={iconSize} round></PocketIcon>
  </PocketShareButton>
  <InstapaperShareButton url={url} style={modalStyles.shareButton}>
    <InstapaperIcon size={iconSize} round></InstapaperIcon>
  </InstapaperShareButton>
  <HatenaShareButton url={url} style={modalStyles.shareButton}>
    <HatenaIcon size={iconSize} round></HatenaIcon>
  </HatenaShareButton>
  <EmailShareButton url={url} style={modalStyles.shareButton}>
    <EmailIcon size={iconSize} round></EmailIcon>
  </EmailShareButton>
  <GabShareButton url={url} style={modalStyles.shareButton}>
    <GabIcon size={iconSize} round></GabIcon>
  </GabShareButton>

변수처리도 완료된 코드이니 원하는대로 바꿔서 사용하면 된다.

아이콘 사용법

또한 아이콘도 원하는대로 쓸 수 있다. 디자이너가 있다면 만들어서 써도 되겠지만 이미 훌륭한 아이콘이니 이 아이콘들을 쓰자.


import {
EmailIcon,

    InstapaperIcon,
    LineIcon,
    TelegramIcon,
    TumblrIcon,
    TwitterIcon,
    ViberIcon,
    VKIcon,
    WeiboIcon,
    WhatsappIcon,
    WorkplaceIcon,
    XIcon,
    LinkedinIcon,
    LivejournalIcon,
    MailruIcon,
    OKIcon,
    FacebookIcon,
    FacebookMessengerIcon,
    GabIcon,
    HatenaIcon,
    PinterestIcon,
    PocketIcon,
    RedditIcon,

} from "react-share";

아이콘들 역시 약간의 프롭스가 존재하는데 둥글게 할 것인지 아니면 사이즈를 어떻게 할 것인지를 결정할 수 있다.

<RedditIcon size={64} round={false} />