[react-native] react-native 라이브러리를 이용한 카카오톡 공유하기

리액트 네이티브 환경에서 카카오톡 공유하기 기능을 구현하기 위해 인터넷을 뒤적이는 중, 어떤 개발자 분이 만들어 둔 카카오 공유 모듈을 발견했다.

 

사용법도 쉬워서 바로 적용해보았다.

 

 

https://github.com/millo-L/react-native-kakao-share-link#readme

GitHub - millo-L/react-native-kakao-share-link: 리액트 네이티브 카카오 링크 오픈 소스

바로 상단의 github 페이지인데, 설명도 아주 잘 나와있다.

 

해당 라이브러리를 사용하려면, 앱에 카카오 SDK 설정을 해놓아야 하는데, 해당 페이지에 설정하는 법이 상세하게 나와있다.

 

 

 

 

 

 

 

AOS 와 IOS 모두 SDK 설정이 끝났다면, 

npm install react-native-kakao-share-link

npm 명령어로 라이브러리를 설치한다.

 

현재 지원하는 기능

• 커머스 템플릿
• 리스트 템플릿
• 피드 템플릿
• 위치 템플릿
• 텍스트 템플릿
• 커스텀 템플릿

 

해당 라이브러리에서 제공하는 템플릿의 종류다.

나는 피드 템플릿을 이용해서 구현해보았다.

아래는 피드 템플릿의 예제소스다.

 

import KakaoShareLink from 'react-native-kakao-share-link';
 async testKakaoShare(){
        try {
            const response = await KakaoShareLink.sendFeed({
              content: {
                title: trn_name,
                imageUrl:
                  '카카오 공유하기 피드에 보여질 이미지URL",
                link: {
                    mobileWebUrl: [이미지를 클릭했을 때, 보낼 모바일 URL 정보], 
                    webUrl: [이미지를 클릭했을 때, 보낼 웹 URL 정보],,
                    androidExecutionParams: [포함시킬 파라미터 정보],
                    iosExecutionParams: [포함시킬 파라미터 정보],
                },
                description: [피드 설명],
              },
              buttons: [
                {
                  title: '앱에서 보기',
                  link: {
                    mobileWebUrl: [버튼을 클릭했을 때, 보낼 모바일 URL 정보], 
                    webUrl: [버튼을 클릭했을 때, 보낼 웹 URL 정보], 
                    androidExecutionParams: [포함시킬 파라미터 정보],
                    iosExecutionParams: [포함시킬 파라미터 정보],
                  },
                },
              ],
            }); 
          } catch (e) {
            console.error(e);
            console.error(e.message);
          }
}

아주 간단하다.

위의 testKakaoShare 함수 이벤트를 실행시키면, 해당 모듈 내부에서 카카오톡 내부 친구 목록으로 바로 리다이렉트 시키기 때문에, 

SDK를 이용해 구현하는 것보다 훨씬 쉽게 공유하기 기능을 구현할 수 있다.

 

그리고, sendFeed (피드 템플릿)의 경우는 Github 페이지의 예제를 그대로 따라하면, 오류가 발생한다.

 

이유는 ?

 

위 예제 처럼, sendFeed 내부의 content 항목에 있는 androidExecutionParams 과 iosExecutionParams 이 

필수 값 이지만, 공식 페이지 예제에서는 해당 파라미터 값이 없기 때문에 오류가 발생한다.

이유는 잘 모르겠지만, 예제 소스가 최신화가 안된 듯하다.

 

위의 예제처럼 실행해주면, 이상없이 실행될 것으로 보인다 ~

해당 라이브러리를 만들어준 개발자님께 감사의 인사를