Task TODOLIST
✨ 개발 내용
useEffect(() => {
if (title.includes("투표 시간")) {
r1VoteToMafiaHandler({
votedPlayer,
isVoted,
timerRef,
setVoteTimerClose,
setIsOverlay,
setVoted,
clearActiveParticipant
});
console.log("votedPlayer", votedPlayer);
}
return () => clearTimeout(voteTimerClose);
}, [title, votedPlayer, isVoted]);
export const r1VoteToMafiaHandler = ({
votedPlayer,
isVoted,
timerRef,
setVoteTimerClose,
setIsOverlay,
setVoted,
clearActiveParticipant
}: VoteState) => {
let r1VoteToMafiaTimer;
if (!timerRef.current) {
timerRef.current = true;
r1VoteToMafiaTimer = setTimeout(() => {
setVoted(true);
setIsOverlay(false);
clearActiveParticipant();
}, 10000);
}
if (isVoted) {
socket.emit("r1VoteToMafia", votedPlayer);
setVoteTimerClose(r1VoteToMafiaTimer);
}
};
TroubleShotting
1. 기존 하나의 useEffect를 분리 시켜 송신하는 부분과 수신하는 부분을 나누었으며, 송신하는 부분에서도 setTimeOut 부분과 시간 경과후 실행할 문장으로 나누었다.
이유는) setTimeout의 콜백 함수는 votedPlayer가 변경된 시점의 값이 아닌, 함수가 실행될 때의 값을 참조하기 때문이었다.
2. 캠 클릭 시 setTimout이 갱신되어 다음 동작으로 넘어가지 않는 에러가 발생하였고 user 별로 각기 다른 동작이 발생하는 에러 또한 발생하였다. 이를 해결하기 위해 useRef에 boolean값을 주어 한 번만 실행하게끔 구성하였다.
📚 레퍼런스 (또는 새로 알게 된 내용) 혹은 궁금한 사항들
(https://developer.mozilla.org/ko/docs/Web/API/setTimeout)