[React] 카카오 로그인(JavaScript SDK 초기화)

이전 포스트에서 카카오 developers에 앱을 등록했다. 카카오의 JavaScript SDK를 초기화해 보자.

프로젝트 생성

여기까지 마치고 react 프로젝트를 생성한다.

npx create-react-app kakao_login

카카오 SDK 추가

index.html에 카카오 SDK를 추가한다.

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

위의 코드를 index.html의 title 바로 아래에 추가한다.

...
    <title>React App</title>
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
...

프로젝트 초기화

우선 App.js, index.js를 싹 비웠다.
App.js

//App.js
import React from 'react';

class App extends React.Component {


}

export default App;

index.js

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

안 쓰는 파일도 지웠지만 그건 입맛대로 해주면 되겠다.

카카오SDK 초기화

카카오 developers에 등록한 앱 페이지에서 앱 키를 가져온다.
JavsScript SDK를 사용하므로 JavaScript 키를 가져오자.

App.js

import React from 'react';

class App extends React.Component {
  render() {
        // 등록된 앱의 JavaScript key
    const jsKey = "f803730b31a04aa1ffd90e1fbd5db921";

    // SDK는 한 번만 초기화해야 한다.
    // 중복되는 초기화를 막기 위해 isInitialized()로 SDK 초기화 여부를 판단한다.
    if (!window.Kakao.isInitialized()) {
      // JavaScript key를 인자로 주고 SDK 초기화
      window.Kakao.init(jsKey);
      // SDK 초기화 여부를 확인하자.
      console.log(window.Kakao.isInitialized());
    }
    return (
      <h1>kakologin</h1>
    )
  }
export default App;

npm start로 서버를 실행해 보면 콘솔에 아래와 같이 출력된다.

참고:https://developers.kakao.com/docs/latest/ko/getting-started/sdk-js