React Kakao 공유하기 기능

React에 카카오톡 공유하기 기능

TripLog 프로젝트를 진행중에 카카오톡 공유하기 기능을 react에서 사용하기 위한 방법에 대한 내용이다.

카카오링크로 메시지를 보내는 과정은 총 2가지가 있다.

createDefaultButton()

• 웹 페이지 소스 코드 중 카카오톡 공유하기 버튼을 띄우려는 위치에서 해당 함수를 호출하며, 이 함수는 해당 위치에 카카오톡 공유하기 버튼을 추가하고, 해당 버튼을 클릭했을 때 메시지 보내기를 요청하는 방식이다.

sendDefault()

• 이 함수는 카카오톡 공유하기 버튼을 추가하지 않고, 메시지 보내기 요청만 합니다. 웹 페이지 구성 요소 중, 카카오톡 공유하기 버튼으로 사용할 버튼 클릭 시 해당 함수를 호출하도록 하는 방식이다.

두가지의 차이점을 알고 각각의 사용방법에 대해 서술하겠다.

준비해야 할 사항

1. kakao developers에서 애플리케이션 등록이 필요하다.
2. 카카오톡 공유하기 기능을 사용하기 위해서는 JavaScript 키가 필요하다.

1. JavaScript SDK 추가

• 카카오 플랫폼 서비스를 이용하여 JavaScript 웹 페이지를 개발하기 위해서 필요한 모듈이다.
  react 환경에서 사용을 할 예정이기 때문에 index.html에 해당 코드를 넣어준다.

// index.html
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

2.  windows.Kakao 로 접근하기

• kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능하다.
• window를 사용한 이유
  • 앞에 window를 넣지 않으면 react가 Kakao의 위치를 찾지 못하기 때문이다.

React에서 카카오톡 공유하기를 사용하기 위한 컴포넌트

// KakaoShare.jsx
import { useEffect } from 'react'

export default function KakaoShare() {
	useEffect(() => {
    kakaoButton()
  }, [])

  const kakaoButton = () => {
    if (window.Kakao) {
      const kakao = window.Kakao

      if (!kakao.isInitialized()) {
        kakao.init('e79b288ebffab6c35ea1c3d7624e2f3a')
      }

      kakao.Share.createDefaultButton({
        container: '#kakaotalk-sharing-btn',
        objectType: 'feed',
        content: {
          title: '오늘의 디저트',
          description: '아메리카노, 빵, 케익',
          imageUrl:
            'https://mud-kage.kakao.com/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
        itemContent: {
          profileText: 'Kakao',
          profileImageUrl: 'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
          titleImageUrl: 'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
          titleImageText: 'Cheese cake',
          titleImageCategory: 'Cake',
          items: [
            {
              item: 'Cake1',
              itemOp: '1000원',
            },
            {
              item: 'Cake2',
              itemOp: '2000원',
            },
            {
              item: 'Cake3',
              itemOp: '3000원',
            },
            {
              item: 'Cake4',
              itemOp: '4000원',
            },
            {
              item: 'Cake5',
              itemOp: '5000원',
            },
          ],
          sum: 'Total',
          sumOp: '15000원',
        },
        social: {
          likeCount: 10,
          commentCount: 20,
          sharedCount: 30,
        },
        buttons: [
          {
            title: '웹으로 이동',
            link: {
              mobileWebUrl: 'https://developers.kakao.com',
              webUrl: 'https://developers.kakao.com',
            },
          },
          {
            title: '앱으로 이동',
            link: {
              mobileWebUrl: 'https://developers.kakao.com',
              webUrl: 'https://developers.kakao.com',
            },
          },
        ],
      });
    }
  }
	
	return (
		<button id='kakaotalk-sharing-btn'>KakaoShare</button>
	)
}

• initialize 을 선언하는 이유

  • Kakao.init: Already initialized 에러를 방지하기 위함이다.

    

    해당 오류를 해결하기 위해서는 Kakao 객체가 초기화 되었는지 한번 체크하고, 초기화 되었을때는 호출하지않고, 초기화되지 않은 상황에서만 호출되게 되는 코드를 작성한다

    if (!Kakao.isInitialized()) {
        Kakao.init('JavaScript 키');
    };

3. kakao.Share 에 대해 알아보기

들어가기에 앞서 해당 기능을 구현하기 위해서 기존의 Link 방식이 아닌 22.05.30 이후 변경된 Share 로 사용하였다.

container: '#kakaotalk-sharing-btn'

• createDefaultButton() 을 사용하기 위해서는
  return 에서 id=kakaotalk-sharing-btn을 찾아 그부분을 렌더링을 한다.
  즉 공유하기 기능을 부여할 DOM container 이다.
  해당 id가 없으면 에러가 발생한다.
  

objectType(5가지 기능을 제공)

• feed
• list
• location
• commerce
• text

social(5가지 기능 제공)
(소셜 정보는 5개의 속성 중 최대 3개까지만 표시해 준다.
우선 순위 Like > Comment > Shared > View > Subscriber)

• likeCount : 콘텐츠의 좋아요 수
• commentCount : 콘텐츠의 댓글 수
• sharedCount : 콘텐츠의 공유 수
• viewCount : 콘텐츠의 조회 수
• subscriberCount : 콘텐츠의 구독

4. createDefaultButton() 과 sendDefault() 의 차이

• createDefaultButton() 은 container: '#kakaotalk-sharing-btn' 을 제공해 카카오톡 공유하기 버튼을 띄우려는 위치에서 해당 함수를 호출해야하는 방법을 사용해야 한다

• sendDefault() 은 카카오톡 공유하기 버튼을 추가하지 않고, 메시지 보내기 요청만 하기 때문에

• container: '#kakaotalk-sharing-btn' 을 제공하지 않는다.
  사용을 원하는 곳에 onClick() 함수를 이용하기 때문에 useEffect를 사용하지 않아도 된다.

// sendDefault() 사용

export default function KakaoShare() {

  const kakaoButton = () => {
    if (window.Kakao) {
      const kakao = window.Kakao

      if (!kakao.isInitialized()) {
        kakao.init('e79b288ebffab6c35ea1c3d7624e2f3a')
      }

      kakao.Share.sendDefault({
        objectType: 'feed',
        content: {
          title: '딸기 치즈 케익',
          description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
          imageUrl:
            'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
        social: {
          likeCount: 286,
          commentCount: 45,
          sharedCount: 845,
        },
        buttons: [
          {
            title: '웹으로 보기',
            link: {
              mobileWebUrl: 'https://developers.kakao.com',
              webUrl: 'https://developers.kakao.com',
            },
          },
          {
            title: '앱으로 보기',
            link: {
              mobileWebUrl: 'https://developers.kakao.com',
              webUrl: 'https://developers.kakao.com',
            },
          },
        ],
      });
    }
  }

  return (
    <button onClick={kakaoButton}>KakaoShare</button>
  )
}

5. 메세지 템플릿 도구를 이용한 커스텀 (커스텀하러가기)

• 카카오에서 제공해주는 템플릿으로 내 서비스에 맞게 수정이 필요한 부분을 커스텀 후 사용 방법

// createCustomButton()
kakao.Share.createCustomButton({
	container: '#kakaotalk-sharing-btn',
	templateId: ${YOUR_TEMPLATE_ID},
	templateArgs: {
	title: '제목 영역입니다.',
	description: '설명 영역입니다.',
	},
});

// sendCustom()
Kakao.Share.sendCustom({
  templateId: ${YOUR_TEMPLATE_ID},
  templateArgs: {
    title: '제목 영역입니다.',
    description: '설명 영역입니다.',
  },
});

내가 만든 템플릿 ID 찾기

6. 마무리

처음에 왜 내가 가져와서 사용 하려고 하니깐 에러가 발생할까? 를 줄이기 위해 공식문서를 통해 학습한 내용을 토대로 내가 겪은 문제에 대해 해결방법과 그 이유에 대해 서술했다.
누군가 내 블로그를 들어와서 단순히 코드를 복사해서 사용하는 것이 아닌 어떤 구성으로 공유하기를 사용할 수 있는지에 대해 알아보는 시간이 되었으면 좋겠다.