[kakao 공유하기][Vite] react 카카오 공유하기 연결(분리하기)

카카오톡 공유작업은 처음 작업해 보는거라

연결하는 방법을 블로그에서 찾다 보니 엄청 정리가 잘된 블로그를 발견했다!

 

https://gallery-k.tistory.com/421

[React] 리액트에 카카오 공유버튼 추가하기(kakao api)

---

 

 

 

 코드 

kakao.init이 안 읽히는것이니, 값이 변하는거 같으니 감시를 하면 되지 않을까 싶어 dependency에 kakao를 넣고, 분리를 하니 아주 잘된다!! 

// shareBox.jsx 

function shareBox () {
  useEffect(() => {
   kakaoInitial();
  }, []);
  
  return (
	<button className="item" onClick={handleKaKaoShare}>카카오톡 공유</button>
  )
}

// shareKakao.js

export const kakaoInitial = () => {
  window.Kakao.cleanup();
  window.Kakao.init('카카오 키값');
}

export const handleKaKaoShare = () => {
  if (window.Kakao) {
    window.Kakao.Share.sendDefault({
      objectType: 'feed',
      content: {
        title: `Rolling`,
        description: `${'홍길동'} 소개합니다.`,
        imageUrl:`https://i.pinimg.com/originals/07/ce/fe/07cefe14f9b9e45f0e5f0a42a78f0747.gif`,
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com',
        },
      },
      buttons: [
        {
          title: `${'홍길동'} 이동`,
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
      ],
    });
  }
};