{ Ellis Min }

[React]: 리액트로 카카오톡 공유 버튼 구현하기

React

09/09/2020

1. 어플리케이션 등록하기

아직 어플리케이션이 kakao developers에 등록이 되어있지 않으면 kakao developers에서 앱을 등록해 줍니다.

2. JavaScript키

리액트로 카카오톡 공유를 구현하기 위해선 JavaScript 키가 필요합니다. 어플 등록 이후에 요약정보 탭에서 자바스크립트 키를 메모해 둡니다. 예: 52ke87d146ek29e688e39dkfn8b0ef28

.env

자바스크립트 키를 .env 에 저장해둡니다

/.env
TEXT
REACT_APP_KAKAO_KEY=52ke87d146ek29e688e39dkfn8b0ef28 
REACT_FETCH_URL=https://yourSite.com

3. Include script

리액트 앱에 <script>를 사용하려면 일반적으로 두가지 방법이 있습니다

  • 1. Helmet 패키지 사용
.../components/Layout/index.js
JS
import React from 'react'
import { Helmet } from 'react-helmet'
import KakaoShareButton from '../KakaoShareButton'


const Layout = () => {
  return (
    <div className="layout">
      {/* Include Kakao sdk */}
      <Helmet>
        <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
      </Helmet>
      <KakaoShareButton />
    </div>
  )
}


export default Layout
  • 2. 마운트 시 include
.../components/Layout/index.js
JS
import React, { useEffect } from 'react'
import KakaoShareButton from '../KakaoShareButton'


const Layout = () => {
  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)
    }
  }, [])


  return (
    <div className="layout">
      <KakaoShareButton />
    </div>
  )
}


export default Layout

Kakao SDK를 마운트 시킨 이후에 windows.Kakao로 접근이 가능합니다. 이를 위해 상위 component (예: Layout)에서 스크립트를 미리 불러와 주세요.

이후에 공유하는 컨텐트 정보는 하위 컴포넌트 KakaoShareButton에서 구현합니다

4. 하위 컴포넌트 KakaoShareButton

.../components/KakaoShareButton/index.js
JS
import React, { useEffect } from 'react'


const KakaoShareButton = () => {
  useEffect(() => {
    createKakaoButton()
  }, [])


  const createKakaoButton = () => {
    // kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
    if (window.Kakao) {
      const kakao = window.Kakao


      // 중복 initialization 방지
      if (!kakao.isInitialized()) {
        // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
        kakao.init(process.env.REACT_APP_KAKAO_KEY)
      }


      kakao.Link.createDefaultButton({
        // Render 부분 id=kakao-link-btn 을 찾아 그부분에 렌더링을 합니다
        container: '#kakao-link-btn',
        objectType: 'feed',
        content: {
          title: '타이틀',
          description: '#리액트 #카카오 #공유버튼',
          imageUrl: 'IMAGE_URL', // i.e. process.env.FETCH_URL + '/logo.png'
          link: {
            mobileWebUrl: window.location.href,
            webUrl: window.location.href,
          },
        },
        social: {
          likeCount: 77,
          commentCount: 55,
          sharedCount: 333,
        },
        buttons: [
          {
            title: '웹으로 보기',
            link: {
              mobileWebUrl: window.location.href,
              webUrl: window.location.href,
            },
          },
          {
            title: '앱으로 보기',
            link: {
              mobileWebUrl: window.location.href,
              webUrl: window.location.href,
            },
          },
        ],
      })
    }
  }


  return (
    <div className="kakao-share-button">
      {/* Kakao share button */}
      <button id="kakao-link-btn">
        <img src="/icons/kakao.png" alt="kakao-share-icon" />
      </button>
    </div>
  )
}


export default KakaoShareButton

WRITTEN BY

Ellis Min

Keeping a record

GitHub