TIL 68. 2024-04-08

Task TODOLIST

• 서버 socket과 연동
• socket 송신과 수신 부분을 나누어 사용

✨ 개발 내용

  //외존성 배열:
  // title: 처음 동작 시기를 설정
  // votedPlayer: 변화되는 값을 설정
  // isVoted: 타이머 종료 후 다음 동작 설정
  useEffect(() => {
    if (title.includes("투표 시간")) {
      //타이머 변수에 값 전달
      r1VoteToMafiaHandler({
        votedPlayer,
        isVoted,
        timerRef,
        setVoteTimerClose,
        setIsOverlay,
        setVoted,
        clearActiveParticipant
      });
      console.log("votedPlayer", votedPlayer);
    }

    // 컴포넌트가 unmount되면 타이머를 클리어
    return () => clearTimeout(voteTimerClose);
  }, [title, votedPlayer, isVoted]);

//NOTE - 투표 시간의 캠 클릭 이벤트 핸들러 (userId 값 전달)
export const r1VoteToMafiaHandler = ({
  votedPlayer,
  isVoted,
  timerRef,
  setVoteTimerClose,
  setIsOverlay,
  setVoted,
  clearActiveParticipant
}: VoteState) => {
// clearTimeout 변수 선언
  let r1VoteToMafiaTimer;

  // setTimeout 함수를 한 번만 실행
  // 캠 클릭시 마다 setTimeout이 새로 생성되어 유저별 동작이 달라진다.
  if (!timerRef.current) {
    timerRef.current = true;

  // 10초 후에 setStatus와 socket.emit 실행
    r1VoteToMafiaTimer = setTimeout(() => {
      setVoted(true);       //시간 경과 후 다음 socket 실행
      setIsOverlay(false); // 캠 클릭 이벤트 비활성화
      clearActiveParticipant(); // 캠 이미지 및 활성화된 user 정보 초기화
    }, 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)