TIL | React 소셜 공유 (react-share 라이브러리 ...), onCopy 이벤트, return -1; ...

23.08.08

1. React 소셜 공유 구현하기

link 공유나 소셜 공유를 해야해서 알아보니 역시나 react-share라는 소셜 공유를 간편하게 도와주는 라이브러리가 있었다 !

1-1. react-share

npm 공식 문서
참고 블로그

라이브러리 설치
npm install react-share
yarn add react-share
일단 사용하려면 위 둘 중에 하나로 라이브러리를 설치해주면 된다.

기본 제공 API

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

기본 제공 Icons

import {
  EmailIcon,
  FacebookIcon,
  FacebookMessengerIcon,
  HatenaIcon,
  InstapaperIcon,
  LineIcon,
  LinkedinIcon,
  LivejournalIcon,
  MailruIcon,
  OKIcon,
  PinterestIcon,
  PocketIcon,
  RedditIcon,
  TelegramIcon,
  TumblrIcon,
  TwitterIcon,
  ViberIcon,
  VKIcon,
  WeiboIcon,
  WhatsappIcon,
  WorkplaceIcon
} from "react-share";

사용법
사용법은 이 위에 기본 제공해주는 API button과 Icon 이미지들을 이용하여 url과 연결시켜주면 된다 !

import { FacebookIcon, FacebookShareButton } from 'react-share';

// 현재 페이지의 url을 currentUrl 변수에 저장
const currentUrl = window.location.href;

<FacebookShareButton url={currentUrl}>
  	// size 변경이 가능하고, round가 true이면 원 모양이고 false이면 사각형 모양
 	<FacebookIcon size={36} round={true} />
</FacebookShareButton>

그러면 이제 버튼을 클릭하면 페이스북 공유를 위한 팝업창이 뜨고 로그인을 하고나면 공유가 가능해진다 !

1-2. react-copy-to-clipboard

npm 공식 문서
참고 블로그

그리고 이제 react-copy-to-clipboard 라는 이 라이브러리를 사용하여 url을 클립보드에 복사되게끔 하면 링크 공유도 가능하다 !

라이브러리 설치
npm install react-copy-to-clipboard
yarn add react-copy-to-clipboard
일단 사용하려면 위 둘 중에 하나로 라이브러리를 설치해주면 된다.

사용법

import CopyToClipboard from 'react-copy-to-clipboard';

// 현재 페이지의 url을 currentUrl 변수에 저장
const currentUrl = window.location.href;

 <CopyToClipboard text={currentUrl} onCopy={() => alert('주소가 복사되었습니다.')}>
  	<button>URL</button>
</CopyToClipboard>

text에 현재 url 주소를 담아주면 클립보드에 복사도 끝이다 !

---

2. onCopy 이벤트

그리고 react-copy-to-clipboard 라이브러리를 사용하게 되면서 onCopy라는 이벤트를 알게되었다 ..!

return (
    <div onCopy={() => alert('주소가 복사되었습니다.')}>
        Hello
    </div>
)

onCopy 이벤트는 text나 img 요소를 복사할 시 반응하는 이벤트로
이런 식으로 복사 반응이 일어날 시 '복사되었습니다.'라는 alert를 띄울 수 있다 !

---

3. return -1; 의 의미

 if (!isUser) {
    console.log("권환이 없습니다.");
    return -1;
  }

return;이나 return false;가 아닌 return -1;을 사용하는 이유가 궁금했다.

알고보니 일반적으로 -1은 오류 또는 예외 상황을 나타내는 의미로 사용되어서
-1을 사용하면 명시적으로 코드가 오류나 예외 상황이라는 것을 표현할 수 있게 되는 것이다 !