리엑트에서 카카오톡 API 공유 시 에러발생.(Helmet, undefined)

1. Helmet 사용 시 에러

Helmet을 다운로드 받아서 사용하다가 갑자기 아래와 같은 에러가 발생했다.

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code.

 

https://github.com/nfl/react-helmet/issues/623

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. · Issue #623 ·

아마도 Mac을 사용하는 친구가 깔고 package.json을 업데이트하다가 생긴 문제 같다. 정확한 이유는 아직 더 파악해야 겠지만 Helmet에는 이런 결함이 있는 것 같다. 

 

따라서 useEffect를 이용하여 색다르게 적용해주었다.

 

Helmet 부분은 주석처리하고 새롭게 적용한 파일

import * as React from "react";
import { PropsWithChildren, useEffect } from "react";
// import { Helmet } from "react-helmet";
import styled from "styled-components";
import { KakaoBtn, CloseBtn, CopyBtn } from "../../elements/buttons/button";
import kakaoShare from "./kakao";

interface ModalDefaultType {
  onClickToggleModal: () => void;
}

const ModalContainer = styled.div`
  width: 100%;
  top: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
`;

const DialogBox = styled.dialog`
  width: 700px;
  height: 263px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(30, 30, 30, 0.185);
  box-sizing: border-box;
  background-color: white;
  z-index: 20;
`;

const LinkBox = styled.div`
  width: 590px;
  height: 100px;
  margin: 10px 0 34px;
  padding: 14px 19px 55px;
  display: flex;
  align-items: center;
  border-radius: 10px;
  background-color: #efefef;
  z-index: 30;
  overflow: hidden;
`;

const Backdrop = styled.div`
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.2);
`;

const Share = ({ onClickToggleModal }: PropsWithChildren<ModalDefaultType>) => {
  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 (
    <ModalContainer>
      <DialogBox>
        <CloseBtn
          bottom="10px"
          left="330px"
          onClick={() => {
            if (onClickToggleModal) {
              onClickToggleModal();
            }
          }}
        />
        <LinkBox>
          <CopyBtn bottom="15px" left="550px" />
          https::/rollingpage.com
        </LinkBox>
        {/* <Helmet>
          <script src="https://developers.kakao.com/sdk/js/kakao.js" />
        </Helmet> */}
        <KakaoBtn
          onClick={() => {
            kakaoShare();
          }}
        />
      </DialogBox>
      <Backdrop
        onClick={(e: React.MouseEvent) => {
          e.preventDefault();

          if (onClickToggleModal) {
            onClickToggleModal();
          }
        }}
      />
    </ModalContainer>
  );
};

export default Share;

 

참고 블로그

https://ellismin.com/2020/09/share-kakao/

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

 

2. 카카오톡 API 사용시 발생한 에러

아래와 같은 에러가 발생하였다.

kakao.tsx:3 Uncaught TypeError: Cannot read properties of undefined (reading 'isInitialized')

현재 undefined로 뜨는것을 보니 선언이 잘 되지 않은 것 같았다.

 

기존코드

const { Kakao } = window;
const kakaoShare = () => {
  if (!Kakao.isInitialized()) {
    Kakao.init("7407a27ef864aaf8a5af6933a8b35200");
  }

  Kakao.Share.sendDefault({
    objectType: "feed",
    content: {
      title: "롤링페이지",
      description: "소중한 사람에게 마음을 전하세요.",
      imageUrl:
        "https://cdn.pixabay.com/photo/2014/09/15/22/23/fountain-pen-447576_960_720.jpg",
      link: {
        mobileWebUrl: "https://developers.kakao.com",
        androidExecutionParams: "test",
      },
    },
    itemContent: {
      profileText: "Rollingpage",
      profileImageUrl:
        "https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80",
    },
    buttons: [
      {
        title: "웹으로 이동",
        link: {
          mobileWebUrl: "https://developers.kakao.com",
        },
      },
    ],
  });
};

export default kakaoShare;

따라서 Kakao를 함수 아래에서 선언해주니 해당 에러가 사라졌다. 어제는 분명 밖에 선언해도 문제가 없었는데 갑자기 에러가 발생하니 참 어이가 없다만 해결해서 다행이다. 정확한 원인은 잘 모르겠지만 undefined 에러가 발생한다는 것은 선언문에 분명 문제가 발생했을 수도 있으니 선언문을 우선적으로 확인해주어야겠다.

const kakaoShare = () => {
  const { Kakao } = window;
  if (!Kakao.isInitialized()) {
    Kakao.init("7407a27ef864aaf8a5af6933a8b35200");
  }