[React] 카카오 공유하기 기능

1. 카카오 개발자 사이트(필수로 해야함) - 설명 생략

• 내 애플리케이션 등록
• 플랫폼 등록
• 내 애플리케이션을 등록하면 key들이 제공되는데, 그 중 javascript key를 사용하면 됨

2. 카카오 sdk 추가

• path: src > components > modal > Modal.jsx
• 나의 경우 모달창을 띄우고 카카오톡 버튼을 눌렀을 때 링크 공유가 되도록 설정해야 함
• 카카오 링크를 공유할 컴포넌트에 useEffect를 추가하고 아래와 같이 로직 추가

useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://developers.kakao.com/sdk/js/kakao.js";
    script.async = true;
    document.body.appendChild(script);
    return () => document.body.removeChild(script);
  }, []);

3. 카카오 링크 연결시킬 함수 생성

• path : src > utils > shareKakaoLink.js

export const shareKakao = (route, title) => { // url이 id값에 따라 변경되기 때문에 route를 인자값으로 받아줌
  if (window.Kakao) {
    const kakao = window.Kakao;
    if (!kakao.isInitialized()) {
      kakao.init(process.env.REACT_APP_SHARE_KAKAO_LINK_KEY); // 카카오에서 제공받은 javascript key를 넣어줌 -> .env파일에서 호출시킴
    }

    kakao.Link.sendDefault({
      objectType: "feed", // 카카오 링크 공유 여러 type들 중 feed라는 타입 -> 자세한 건 카카오에서 확인
      content: {
        title: title, // 인자값으로 받은 title
        description: "설명", // 인자값으로 받은 title
        imageUrl: "이미지 url",
        link: {
          mobileWebUrl: route, // 인자값으로 받은 route(uri 형태)
          webUrl: route
        }
      },
      buttons: [
        {
          title: "title",
          link: {
            mobileWebUrl: route,
            webUrl: route
          }
        }
      ]
    });
  }
};

4. 요소와 연결시키기

• import
  • 위에서 생성한 카카오 링크 연결 함수를 import 시켜줌

import { shareKakao } from "../../utils/shareKakaoLink";

• 카카오 링크 공유 버튼을 눌렀을 때 해당 함수 실행
  • route, title은 이전 컴포넌트에서 받은 인자값을 넘겨줌

<button onClick={() => shareKakao(route, title)}>
  <img className="w-12 h-12" src={`${process.env.PUBLIC_URL}/assets/KakaoLogo.png`} alt={"Kakao Logo"} />
</button>

5. 완료

• 해당 방법대로 했을 때 문제 없이 카카오톡 링크 공유하기가 완료됨

6. 에러 해결

• ErrorCode(4012) 에러 발생
  • 카카오 개발자 사이트 > 내 애플리케이션 > 플랫폼에서 구동시킬 서버를 잘못 설정해줘서 발생한 에러였다. 리액트 개발 서버인 localhost:3000을 추가함으로써 문제가 해결되었다. 구동하는 서버와 카카오 플랫폼 서버 주소를 똑같이 설정해줘야 한다.

참고 자료

• https://goddino.tistory.com/335