카카오톡으로 공유하기를 하려면 먼저 Kakao developers에 가입을 하고 내 애플리케이션에 앱을 추가해 둬야 한다. 앱을 만들고 들어가면 JavaScript키가 있는데 이후 SDK이용시에 사용된다.

1. 메시지 API 선택하기

1_1 카카오톡 공유 API

메시지를 보낼때 카카오톡 앱을 실행시켜 카카오가 제공하는 카카오톡 친구 또는 대화 목록 페이지를 띄워 사용자가 메시지를 보낼 수 있게 함.

1_2 카카오톡 메시지 API

카카오톡 앱을 실행시키지 않고 친구목록 API를 통해 받은 친구 정보 중 지정한 친구에게 메시지를 보내는 기능을 제공. 친구목록 데이터를 제공하지만 카카오톡 친구 목록 페이지를 띄워주지 않으므로 직접 목록을 만들어야함.

위 두가지 중 나는 카카오톡 공유 API를 사용했다!

2.메시지 종류 및 구성 방법 선택하기

카카오에서 제공되는 기본 메시지의 종류로는 피드, 리스트, 위치, 커머스, 텍스트, 캘린더 등이 있다.
이를 바탕으로 객체 형태로 직접 정의하여 메시지를 구성하는 객체를 전달하는 기본 템플릿 과
개발자 웹사이트의 메시지 템플릿 도구를 이용하여 미리 만들어둔 사용자 정의 템플릿을 사용할 수 있다.

사용자 정의 템플릿에도 사용자 인자를 사용하여 메시지 전송 API호출시 템플릿 파라미터로 이미지나 원하는 정보를 치환해 넣을 수 있다.

사용자 정의 템플릿을 이용해 미리 템플릿을 만드려면 도구>메시지 템플릿으로 이동하여 템플릿 만들기를 하면 된다!

3. 호출 방법 선택하기

1. 공유하기 버튼을 SDK를 통해 추가하는 방식
2. 직접 추가한 버튼에 메시지 보내기 요청만 연결하는 방식

나는 직접 추가한 버튼에 메시지 보내기 요청만 연결하는 방식으로 만들었다.

4. SDK 실행하기

SDK 다운로드에서 최신 SDK 버전을 확인 후 index.html에 추가한다.

<head>
...
	<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.2.0/kakao.min.js" integrity="sha384-x+WG2i7pOR+oWb6O5GV5f1KN2Ko6N7PTGPS7UlasYWNxZMKQA63Cj/B2lbUmUfuC" crossorigin="anonymous"></script>
</head>

index.tsx 파일에 init 시켜준다.

window.Kakao.init(${javascript_key});

typescript사용시에 Property 'Kakao' does not exist on type 'Window & typeof globalThis' 오류가 난다면 react-app-env.d.ts에 추가하기

interface Window {
	Kakao: any;
}

4_1.공유 함수 작성

function shareToKaKao() {
	window.Kakao.Share.sendCustom({
		templateId: ${template_id},
		templateArgs: {
            //사용자 인자를 쓸경우 아래에 키 : 값 형태로 작성해 주면 된다.
			send_user: 'TOOIT',
			vote_title: '오늘 머먹지?',
			vote_id: 10,
		},
	});
}

...
<button onClick={shareToKakao}>
<img
src="https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"
alt="카카오링크 보내기 버튼"
/>
</button>

위의 코드를 넣고 버튼을 클릭하면 이렇게 공유하는 화면이 뜬다!