[0517] 피카츄 놀이터

문제

useState를 이용해서 coord를 지정해주고
useEffect를 다음과 같이 작성했다

useEffect(() => {
  window.addEventListener("keydown", handleKeyDown);
  return () => {
    window.removeEventListener("keydown", handleKeyDown);
  };
}, []);

handleKeyDown은 setCoord 함수를 이용하여 좌표를 옮겨주는 함수였다.

그런데, 쉬울 줄 알았던 이 과제가... coord가 계속 같은 값이 나오면서 어려워졌다.

튜터님이 말씀하신 문제 원인을 내가 이해한 바로는 handleKeyDown 함수가 계속 새로 생긴다고 하셨었나..?
사실 기억이 또 잘 나지 않는다.
아마 이해가 안돼서 그런 것 같은데 다시 질문을 해봐야 할 것 같다

---

해결 1

useEffect 의존성 배열에 coord를 추가해준다.

useEffect(() => {
  window.addEventListener("keydown", handleKeyDown);
  return () => {
    window.removeEventListener("keydown", handleKeyDown);
  };
}, [coord]);

근데 나는 coord가 바뀔 때마다 이벤트를 붙였다가 뗐다가 하는게 마음에 안 들어서 다른 방법을 원했다..

해결 2

ref와 state를 이용해주었다.

const coordRef = useRef({ x: 0, y: 0, isWatchingLeft: false });