Social 공유 버튼 만들기
이번 포스팅에서는 가장 많이 사용하는 공유 버튼 4가지를 만들어 보도록 하겠습니다.
Button Container 만들기
우선 버튼이 위치할 컨테이너를 만들도록 하겠습니다.
styled-component를 사용할 예정이므로, styled-component를 설치합니다.
yarn add styled-component아래와 같이 버튼을 감쌀 컨테이너 코드를 작성해 줍니다.
Flex와 Grid 문법을 조합하여 사용하였으며, Flex와 Grid에 대해서 궁금하시다면 아래 링크를 참조해 주세요.
7분만에 알아보는 CSS flexbox → (링크)
7분만에 알아보는 CSS Grid → (링크)
코드를 실행해보면 아래와 같이 렌더링이 되는 것을 알 수 있습니다.
Facebook, Twitter 공유 버튼 만들기
페이스북과 트위터 공유 버튼을 만드는 것은 react-share 라이브러리가 있어 빠르고, 편리하게 작성할 수 있습니다.
우선 react-share 라이브러리부터 설치해 보도록 하겠습니다. (라이브러리 github 링크)
yarn add react-sharegithub 상세 설명을 읽어보면, 아래와 같이 적혀 있습니다.
모든 컴포넌트의 필수 값으로 children(자식 컴포넌트)와 url을 넣어주어야 한다고 합니다. 그리고 좀 더 아래쪽으로 내려가보면 Icon 컴포넌트까지 제공하는 것을 알 수 있습니다.
아이콘의 size와 round 여부, radius까지 손쉽게 활용이 가능합니다.
Facebook, Twitter 공유 버튼을 추가해 보도록 하겠습니다.
아래와 같이 코드를 변경해 주세요.
코드를 실행해 보도록 하겠습니다.
이쁘게 페이스북과 트위터 버튼이 추가된 것을 알 수 있습니다.
현재 URL 복사 버튼 만들기
현재 URL 복사 버튼도 react-copy-to-clipboard 라이브러리를 활용하면 쉽게 만들 수 있습니다.
우선 라이브러리를 설치해 보도록 하겠습니다. (라이브러리 github 링크)
yarn add react-copy-to-clipboardgithub readMe를 읽어보니, 아래와 같이 CopyToClipBoard props에 복사할 값을 넣어주고, CopyToClipBoard 컴포넌트로 우리의 버튼 컴포넌트를 감싸주면 된다고 합니다.
사용방법을 익혔으니, URL 복사 버튼을 만들어 보도록 하겠습니다.
코드를 실행해 보도록 하겠습니다.
이쁘게 URL 공유 버튼이 추가된 것을 알 수 있습니다.
카카오 공유 버튼 만들기
이제 마지막으로 카카오 공유버튼을 만들어 보도록 하겠습니다. 카카오 공유버튼은 아쉽게도 라이브러리가 없어 직접 kakao SDK를 불러와서 활용해야 합니다.
우선 아래 링크로 이동하여, 카카오 API Key 발급이 필요합니다. 링크로 이동하여 아래와 같은 key를 발급받아 주세요.
여기서 JavaScript 키를 사용할 예정이니 따로 복사 해주세요.
카카오의 경우, 아래 사진처럼 javascript SDK를 사용해야 합니다. 즉, html 내에서 script 태그를 통해서 카카오의 javascript 파일을 불러오고, kakao SDK를 통해 버튼을 컨트롤해야 합니다.
React에서 html에 script를 넣는 방법을 직접 구현할 수 있지만, 이 것 또한 많은 사람들이 고민해 놓은 과제이므로 usehooks 사이트에서 다른 사람들이 만들어 놓은 hooks를 사용해 보도록 하겠습니다.
useScript의 기능은 src에 해당하는 script를 불러오고, script의 상태를 결과 값으로 내려주는 hooks입니다. 이렇게 사용하는 이유는 script를 비동기로 불러오기 때문에 script가 다 불러왔을 때 우리가 원하는 작업들을 하기 위함입니다.
src 아래 hooks.js 파일을 하나 만들고, 아래 코드를 붙여넣기 해줍니다.
그리고 App 컴포넌트에서 useScript hooks를 import하여, kakao SDK를 초기화 해보도록 하겠습니다.
useEffect를 활용하여, 최초 렌더링이 끝나고 나서 script의 import 상태를 확인한 후 초기화를 진행해 주었습니다. useEffect를 활용한 이유는 kakao SDK를 import하는 작업이 App 컴포넌트의 렌더링을 방해하면 안되므로, useEffect에서 side Effect로 처리해 주었습니다
초기화를 마쳤으니, 카카오 공유 버튼 핸들러를 추가해 보도록 하겠습니다.
위와 같이 handleKakaoButton 함수를 추가하여 주고, 버튼 click event에 바인딩해주었습니다.
저의 경우, kakao 링크에서 제공하는 sendScrap 기능을 사용하였는데, 이 외에도 다양한 기능이 많으니 살펴보시고 상황에 맞는 기능을 사용하면 될 것 같습니다. (kakao 기능 명세서 링크)
다시 실행하고, 버튼을 클릭해 보도록 하겠습니다.
위와 같이 공유하기가 버튼이 나오는 것을 알 수 있습니다.
만약에 아래와 같은 페이지가 뜬다면, 아래와 같이 카카오 어플리케이션 등록에서 localhost 넣는 것을 깜빡하신 것이니 주의해주세요.
마지막으로 Kakao 버튼을 꾸며보도록 하겠습니다. 우선 아래 kakao 로고 이미지를 다운 받아 src 폴더 밑에 추가해 주세요.
그리고 아래와 같이 Kakao Button을 만들어 줍니다.
코드를 실행해 보도록 하겠습니다.
위와 같이 4가지 버튼이 이쁘게 모두 만들어 진 것을 알 수 있습니다. 👏👏👏
이 블로그 글은 Code Pot, 리액트 챌린지의 과제로 작성되었습니다.
Code Pot, 리액트 챌린지가 궁금하다면? ⇒ 링크
전체 코드
(github 링크)에서 전체 코드를 확인 하실 수 있습니다.
