[카카오 API] 리액트 - 사이트 공유 기능 만들기

JJeong·2021년 6월 7일
2

클립보드에 링크 복사하기


카카오톡으로 공유하기

최종 코드

<!--index.html-->

<body>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</body>
// Explain.js

const Explain = 
  useEffect(() => {
      Kakao.init("Kakao-Dev javascript 키값");
  }, []);

const shareKakao = () => {
  Kakao.Link.sendDefault({
    objectType: "feed",
      content: {
        title: themeData.title,
        description: "내용!",
        imageUrl: themeData.titleImage,
        link: {
          mobileWebUrl: "모바일 url!",
          androidExecParams: "test",
        },
      },
      buttons: [
        {
          title: "웹으로 이동",
          link: {
            mobileWebUrl: "공유할 url!",
          },
        },
      ],
  });
}

return (
  <>
    <button onClick={shareKakao}>카카오톡 공유하기</button>
  </>
)

+ 이슈 해결


할 때는 엄청 헤맸는데 막상 끝내고 나니 쉽게 느껴진다....😅 (API를 잘 만들어준 카카오를 찬양하자.)
문서가 html 기준으로 작성되어 있어서 react로 감을 잡기가 어려웠다.
처음엔 키값을 넣어 초기화해주는 부분부터 막히다가 나중엔 kakao 자체에서 제공하는 에러 처리가 돌아왔다. (이슈 해결 참고)
카카오 API 사용은 처음이었다. 공식 문서와 레퍼런스를 통해 무사히 구현해서 기쁘다.😊

0개의 댓글