페이지 이동에 따른 게임 실행 에러 해결

Kaplay 라이브러리를 이용해 게임 기능을 구현했습니다.

웹 게임 만들기를 도와주는 Kaplay 라이브러리 사용

 

개발을 하던 도중 다른 페이지에 갔다가 다시 게임페이지에 돌아오니..... 에러가 발생했다...

위의 자료를 보면 페이지 이동후 다시 게임을 플레이할 때, 비이상적인 속도를 갖으며 텍스트가 검은색으로 나타나는 에러가 발생한다.

 

원인을 두 가지 생각해 봤다.

1. useEffect로 실행하던 라이브러리 실행 커스텀 함수가 언마운트시 함수의 객체가 없어지지 않아서.
2. 전역으로 실행되는 Kaplay 라이브러리의 함수 객체의 유지

첫번째 원인은 useEffect에서 페이지가 언마운트되면 kaplay 객체에 있는 destroy() 함수를 실행하도록 코드를 작성해봤다. 쉽게 말하자면 게임을 초기화 하는 동작이다.

 

하지만, 여전히 에러가 발생하고 있었다.

 

그래서 첫 번째 원인이 아닌 두 번째 원인을 해결하기 위해 머리를 굴려보았다....

 

우선 필자는 React에서 window.location.reload를 이용해 페이지 자체를 새로고침 해주면 되지 않을까? 라는 생각을 했다. 새로고침을 위해서는 페이지 컴포넌트가 렌더링 되면 useEffect를 이용해 reload를 해줘봤다. 물론 무한 새로고침을 시작했다. 당연한 결과였다. 페이지가 마운트되면 useEffect에 있는 코드가 실행된다. 이때 useEffect에 있는 코드가 reload 함수인게 문제다.

 

그렇다면 어떤 방식을 적용시켜줘야할까?

 

필자는 HTML의 a 태그를 사용했다.

 

Link 태그나 NavLink 태그의 경우 페이지의 새로고침 없이 이동이 가능하게 해주는 컴포넌트 이지만, a 태그의 경우 이동시 아예 페이지 자체를 처음부터 로드해 렌더링하는 태그이기 때문에 전역으로 실행되는 Kaplay 라이브러리 코드에 적합하다는 생각을 했다.

import React from 'react'
import { Link } from 'react-router-dom';
import styled from 'styled-components';

interface HeaderBlockInterface {
  text: string,
  needReload: boolean,
}

const HeaderBlock = ({ text, needReload }: HeaderBlockInterface) => {
  const urlText = text.toLowerCase();
  return (
    <NavBlock>
      {
        needReload ?
          <ATagBlock href={`/${urlText}`}>
            {text}
          </ATagBlock> :
          <LinkBlock to={`/${urlText}`}>
            {text}
          </LinkBlock>
      }
    </NavBlock>
  )
};

const NavBlock = styled.div`
  width: 15rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
`;

const LinkBlock = styled(Link)`
  color: black;
  text-decoration: none;
  font-weight: 800;
`

const ATagBlock = styled.a`
  color: black;
  text-decoration: none;
  font-weight: 800;
`

export default HeaderBlock;