리엑트에서 카카오톡 메세지 공유 API 사용 방법

1. 카카오톡 메세지 공유 API 사용 방법

카카오톡 메세지 공유 API는 쉽게 자바스크립트를 보고 다운로드 받을 수 있다. 아래 유튜브를 참고하면 쉽게 따라할 수 있다.

https://www.youtube.com/watch?v=KttKrcCc6bU 

문제는 리엑트에서 어떻게 적용하는가이다. 리엑트에 적용할때는 주의할 점이 있다.

 

2. 리엑트에 적용하기

먼저 카카오 파일을 하나 만들어준다. 나는 React + TypeScript 를 사용하기 때문에 확장자가 tsx이다. 하지만 안에 들어가는 내용은 다른 파일 확장자라도 상관없다.

 

참고로 카카오톡 공유 API의 이미지는 URL만 가능하고 URI는 불가능하다.

https://devtalk.kakao.com/t/url/713

[카카오링크] 전송할 이미지가 url 만 가능한 문제

 

kakao.tsx

const { Kakao } = window;

const kakaoShare = () => {
  if (!Kakao.isInitialized()) {
    Kakao.init("본인의 API키를 입력하세요.");
  }

  Kakao.Share.sendDefault({
    objectType: "feed",
    content: {
      title: "롤링페이지",
      description: "소중한 사람에게 마음을 전하세요.",
      imageUrl:
        "https://cdn.pixabay.com/photo/2014/09/15/22/23/fountain-pen-447576_960_720.jpg",
      link: {
        mobileWebUrl: "https://developers.kakao.com",
        androidExecutionParams: "test",
      },
    },
    itemContent: {
      profileText: "Rollingpage",
      profileImageUrl:
        "https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80",
    },
    buttons: [
      {
        title: "웹으로 이동",
        link: {
          mobileWebUrl: "https://developers.kakao.com",
        },
      },
    ],
  });
};

export default kakaoShare;

2.1 types/index.d.ts 생성하기

위와 같이 하면 "window & typeof globalThis 형식에 kakao 속성이 없습니다." 라는 에러가 발생할 수 있다.

이때는 src 폴더 아래에 types 폴더를 생성해주고 그 아래에 index.d.ts 파일을 생성하여 아래와 같은 내용을 입력해준다.

export {};

declare global {
  interface Window {
    Kakao: any;
  }
}

 

에러가 해결되었으면 import를 받아서 다음과 같이 사용한다.

 

Share.tsx

import kakaoShare from "./kakao";   
import { KakaoBtn } from "../../elements/buttons/button";

    <Helmet>
          <script src="https://developers.kakao.com/sdk/js/kakao.js" />
        </Helmet>
   <KakaoBtn
          onClick={() => {
            kakaoShare();
          }}
        />

2.2 Helmet 사용법

이때 <script>태그로 카카오 API주소를 받아와야 하는데 Helmet을 사용해준다. Helmet을 사용하려면 다음과 같은 명령어로 설치를 해주어야 한다.

npm install --save react-helmet @types/react-helmet

설치가 완료되면 위 Share.tsx 파일과 같이 Helmet 태그 사이에 script를 사용해주면 된다.

 

3. 카카오 애플리케이션에 주소 등록

이어서 카카오 애플리케이션에 본인의 웹사이트 링크를 등록하면 사용이 가능하다. 이 부분을 빼먹으면 버튼을 클릭하여도 카카오톡 공유창은 뜨지만 연결이 안되는걸로 나올 것이다.