UseEffect

정글일지 60 날짜 2023년 6월 22일 목요일 계획 멀티플레이 서버 구현 산성비 게임 고도화 아바타 회의 구현 결과 Colyseus를 이용해 멀티플레이를 위한 Room 생성에 성공했다. 산성비게임에서 키워드 생성 갯수와 출발속도 증가를 다룰 수 있게 되었다. TIL useEffect() typescript로 되어있는 skyoffice 코드를 살펴보다 class 정의 내에서 useEffect 함수를 많이 보았다. 그리고 게임을 setInterval로 작성했었다. 드디어 이걸 이해하였다. useEffect는 1회 호출된다. 마지막에 인자를 설정하여 추가적으로 호출할 지를 결정할 수 있다. 즉 2번째 인자를 [ ]처럼 비워두면 추가 호출에 관한 조건이 없기 때문에 더이상 호출되지 않는다. Game.state로 두었던 나는 Game.state에 변화가 일어날 때 마다 useEffect가 호출되었다. 위에서 말했다싶이 이 함수 내에는 특정 시간 간격으로 키워드를 생성하는 등의 인터벌 함수를 구현했었다. 인터벌 함수가 game.state를 변화시켰고, 그로 인해 useEffect가 호출되었고 이 루프가 반복되어서 인터벌 함수들이 지나치게 많이(거의 수만번 이상) 호출되어 게임이 엉켰었다. useEffect의 두번 째 인자를 제거하여 이 문제를 해결하였다. 또한 return 문에 clearinterval을 통해 정의한 인터벌들을 모두 초기화 해주었는데, 그로 인해 주기적인 호출이 발생하지 않아 키워드가 1회만 생성되거나 하는 문제가 있었다. 이부분도 clearinterval을 제거하였더니 해결되었다. ...