MousePosition state의 변경으로 발생한 App 컴포넌트 리로딩 문제

[HyeseonLee]

mouse 움직이는 곳에 동물 자원 follow 하게 만들기 위해서
App안에서 mousePosition state를 만들고, handleMouse를 사용하고 있었다.
이렇게 되니까 mousePosition state가 set될때마다 App 컴포넌트가 리로딩되는 문제가 발생했다.

[HyeseonLee]

문제 원인

1. App 안에서 관리되는 state는 변경이 일어날 때마다 App 전체가 Re-loading된다.

해결 방법

1. mouse position을 핸들링하는 함수는 화면 전체에 적용되면 되기 때문에 App의 자식 컴포넌트로 MouseComponent 만들어서 w-screen, h-screen 스타일을 지정하고, mouse position 핸들링 함수를 넣는다.
2. MouseComponent를 position: absolute를 준다.

[HyeseonLee]

문제 상황

MouseComponent가 App 컴포넌트 구성 요소의 가장 하단에 위치한다.

해결 방법

1. position absolute는 position:static이 아닌 조상을 기준으로 움직이기 때문에 App 의 가장 부모 div에 positoin:relative를 넣어서 게임 화면 전체를 바운더리로 잡을 수 있게 한다.
2. z-index를 App의 가장 부모 div와, MouseComponent가 같은 값을 가질 수 있도록 하고, 마우스에 따라다니게 될 요소는 z-index를 그보다 +1로 준다.

[HyeseonLee]

AGAIN 문제 상황

onClick 이벤트가 있는 div에서는 mouse position이 업데이트 되지 않는다.