[React] 리액트 카카오톡 공유하기

https://developers.kakao.com/

Kakao Developers

 

카카오에서는 다양한 API들을 제공한다

내가 구현할 것은 JS+리액트로 카카오톡 공유하기 기능을 구현하기!

 

1. 로그인 후 내 애플리케이션을 등록해준다

 

2. 플랫폼에는 사이트 도메인을 넣어줌, 배포 전 테스트일 때는 localhost 링크 넣어주기!

 

3. 구현 방법을 선택한다

API 메소드

 - 공유하기 버튼도 만들 것인지

 - 내가 만들어둔 버튼에 onclick만 써서 바로 보낼것인지!

 

메시지 구성 방법

 - 기본 메시지 (카카오톡에서 템플릿 제공해줌)

 - 스크랩 메시지 : 알아서 웹페이지 스크랩 후 그 정보를 보낸다는 식인 것 같음

 - 사용자 정의 메시지 : 템플릿 없이 문자 하나 딱

 

기본 메시지 템플릿 

 - 피드 : 가장 기본

 - 리스트 : 피드랑 비슷한데 사진이 여러개라 생각하심.... 아닌가 암튼

 - 위치 : 위치 정보 보내줌

 - 커머스 : 가격 등 상품 정보

 - 텍스트 : 사용자 정의 메시지랑 비슷한 듯

 

난 직접 만든 버튼 + 템플릿(사용자 정의 메시지인가봄!)으로 했다

내가 쓸 레퍼런스는 sendCustom()이라는 뜻!

카카오에서는 이러한 코드 예시를 제공해줌

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.6.0/kakao.min.js"
  integrity="sha384-6MFdIr0zOira1CHQkedUqJVql0YtcZA1P0nbPrQYJXVJZUkTk/oX4U9GhUIs3/z8" crossorigin="anonymous"></script>
<script>
  Kakao.init('c089c8172def97eb00c07217cae17495'); // 사용하려는 앱의 JavaScript 키 입력
</script>

<a id="kakaotalk-sharing-btn" href="javascript:shareMessage()">
  <img src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png"
    alt="카카오톡 공유 보내기 버튼" />
</a>

<script>
  function shareMessage() {
    Kakao.Share.sendCustom({
      templateId: 82775,
      templateArgs: {
        title: '라이언이 즐겨먹던 바로 그 틴케이스 치즈볼',
        description: '바라만 봐도 즐거워지는 힐링 패키지에는 시크릿 스토리가 숨어있어요.',
      },
    });
  }
</script>

 

이제 이걸 어떻게 쓰냐면 사전 작업이 필요한데

 

1. 카카오 SDK를 추가해준다

https://developers.kakao.com/docs/latest/ko/javascript/getting-started

Kakao Developers

 

이 페이지에 SDK 설치 있음

이걸 보통 public/index.html에 추가해주곤 하는데 나는 버튼 있는 페이지에 썼음

 

2. 초기화

자바스크립트 키는 애플리케이션 생성할 때 같이 생기니까 그거 할당해주기!

그니까 항상 함수를 쓸 때 sdk 포함해주고 init으로 초기화 해주는 과정 후 sendDefault함수를 쓰면 되는 겁니당

 

코드 적용 예시

useEffect(() => {
        // SDK 로드
        const script = document.createElement('script');
        script.src = 'https://t1.kakaocdn.net/kakao_js_sdk/2.6.0/kakao.min.js';
        script.async = true;
        document.body.appendChild(script);
    
        return () => {
          // 컴포넌트가 언마운트될 때 스크립트 제거
          document.body.removeChild(script);
        };
      }, []);
    
      const shareKakao = () => {
        if (window.Kakao) {
          const kakao = window.Kakao;
          if (!kakao.isInitialized()) {
            kakao.init('162e234250fed19646e20b80576a28af');
          }
          window.Kakao.Share.sendCustom({
            templateId: 104264,
          });
        }
      };

1. useEffect

index.html 파일에 직접 <script> 태그를 추가하는 방법이랑 똑같음! 둘 중 하나만 하면 됨

스크립트를 생성하고 `document.body`에 추가하여 스크립트를 로드함.

컴포넌트가 언마운트될 때 스크립트를 제거하는 코드는 메모리 누수 방지를 위해 써줌. 

2. shareKakao 함수

Kakao앞에 window를 붙이지 않으면 Kakao를 못 찾는? 오류 발생
따라서 모든 Kakao 앞에 window를 붙여줌! `window.Kakao` 로 객체가 있는지 확인 후 `kakao.isInitialized()`를 사용하여 SDK가 초기화되었는지 확인하고, 초기화되지 않았다면 `kakao.init()`을 호출하여 SDK를 초기화함.

`window.Kakao.Share.sendCustom()` 메서드를 호출하여 카카오톡 공유를 실행함. templateId는 카카오에서 사용자 정의 템플릿 만들 때 부여해준 Id임.

 

이제 저 코드를 내가 만든 버튼이 있는 페이지에 작성 후 버튼의 onclick에 shareKakao함수를 넣어주면 기능이 정상 작동된다!

 

최종 코드 예시

import { KakaoBtn, PresentBtn, ResultText, ResultWrapper} from "Styles/styles";
import { useEffect } from "react";

export default function Result() {

    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://t1.kakaocdn.net/kakao_js_sdk/2.6.0/kakao.min.js';
        script.async = true;
        document.body.appendChild(script);
    
        return () => {
          document.body.removeChild(script);
        };
      }, []);
    
      const shareKakao = () => {
        if (window.Kakao) {
          const kakao = window.Kakao;
          if (!kakao.isInitialized()) {
            kakao.init('162e234250fed19646e20b80576a28af');
          }
          window.Kakao.Share.sendCustom({
            templateId: 104264,
          });
        }
      };

    return(
        <ResultWrapper>
                ...
            <KakaoBtn onClick={shareKakao}>카카오톡 공유하기</KakaoBtn>
        </ResultWrapper>
    );
}

이런 식으로!

 

 

잘 작동하는 것을 볼 수 있다.

웹을 배포 후 폰으로 접속시 카톡이 자동 로그인되어 있어서 바로 공유하기 창이 뜬다!

 

담엔 지도 쓰고싶다!