React에서 sdk를 이용하는 방법 또는 Kakao.init('key')를 이용하는 방법

안녕하세요.

react를 이용해 사이트를 개발 중입니다.

카카오 공유하기(카카오링크)를 이용하려하는데요.

개발가이드를 확인해보니

script src="//developers.kakao.com/sdk/js/kakao.min.js"

를 이용해 SDK를 가져오고,

Kakao.init('YOUR APP KEY'); Kakao.Link.createDefaultButton({ container: '#kakao-link-btn', objectType: 'feed', content: { title: '딸기 치즈 케익', description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅', imageUrl: 'http://mud-kage.kakao.co.kr/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png', link: { mobileWebUrl: 'https://developers.kakao.com', webUrl: 'https://developers.kakao.com' } },

를 이용하여 공유하기 버튼으로 이용하는 것으로 이해하고 있습니다.

반면 React는 .html이 아닌 컴포넌트 내에서 title, description등을 이용해야하는데 Kakao변수를 지정하지 않고Kakao.init을 어떻게 사용할 수 있나요?

SDK를 받아와서 모듈처럼 이용해보려했는데 변수를 지정하는 방식이 const 나 let대신 var로만 되어있어 변수 가 제대로 지정이 안되는데, react애서는 그대로 가져다 쓸 수가 없는건가요?

간단하게 얘기하면 React에서 kakao공유하기를 이용하는 방법을 알고 싶습니다.

좋아요 2

React 적용 가이드에 대해서 공식적으로 안내드리지는 못하고 있는데요.

.html에 SDK를 import 하고 전역 객체에 접근해서 사용 가능할 것 같아요.

window.Kakao.init();
window.Kakao.Link.createDefaultButton();
좋아요 2

오! 감사합니다! 그런 방법이 있었네요~

대박 감사합니다 댄님! 헤매고 있었는데 요러케 적용하니 되네요
저처럼 헤매시는 초보 분들을 위해… 아래처럼 코드 남겨봅니다.
처음으로 카톡 api쓰고 리액트로 만드는거라 신났습니다…

  • 문제
    곧바로 a태그 안이나, a태그 뒤에 jsx 코드를 넣으면
    카카오톡 에러가 뜰거예요(kakao.min.js:20 Uncaught KakaoError: container is required for Kakao login button: pass in element or)
    분명 element코드 뒤에 넣었는데
    함수가 id를 못찾…

  • 해결방법
    그래서 리액트 라이프 사이클 api를 찾아보니 쉽게 해결됐네요.
    제가사용한 componentDidMount
    외부라이브러리 연동할때 사용되고 컴포넌트가 화면에 나타날때 호출된다고
    해요!
    화면에 a태그가 렌더링 되고 호출되는 함수니 꽤 말이 되는 것 같습니다…

  • 아래 코드에서 변경해야할것
    렌더링 될 때 마다 kakao.init()이 불러지는건 생성자로 변경해야할것같네요


class App extends Component {

componentDidMount(){
   window.Kakao.Auth.createLoginButton({
      container: '#kakao-login-btn',
      success: function(authObj) {
    // 로그인 성공시, API를 호출합니다.
       window.Kakao.API.request({
          url: '/v2/user/me',
          success: function(res) {
            alert(JSON.stringify(res));
      },
      fail: function(error) {
        alert(JSON.stringify(error));
      }
    });
  },
  fail: function(err) {
    alert(JSON.stringify(err));
  }
})

  }

 render() {
    window.Kakao.init('키키키키!!!');

return (
  <div>
  <a id="kakao-login-btn"></a>
  </div>
);
  }
}

export default App;
좋아요 3

리액트를 사용하고 있는데요 .html에 SDK 를 어떻게 import 하죠…?
html은 안해보고 바로 리액트로 시작해서 매번 이렇게 SDK 를 추가할때 어려움이 따르네요…ㅠㅠ
대강 head 안에 script 태그로 하는 것만 알고 있어요…하핳…