인프런 커뮤니티 질문&답변

강의장면에서 크롬창 2개켜서 포커스를 해야만 실시간 채팅이 반영된다고 말씀해주셨는데요.

제가 컴퓨터 1대를 더 준비해서 컴퓨터2대로 통신을 해봤는데 이미 포커싱이 된 상태에서는 실시간으로 채팅이 올라오지 않더라구요. 포커싱을 한번 해제했다가 돌아와야 반영됬습니다. (하지만 Socket.io는 바로 data를 받아옵니다)

onMessage에서는 실시간으로 data를 받아와 mutateChat()함수도 실행되는데 chatData가 바꼇음에도 불구하고 리렌더링이 진행되지 않았습니다. 아마 immutable하게 바꾸지 않아서 그런것 같은데.... 

아래 코드에서 mutateChat()을 통해 chatData를 변경하면 리렌더링이 일어나야하는데 리렌더링이 일어나지 않아서 실시간으로 반영이 안되는 것 같습니다. 혹시 이 부분은 제가 잘못한게 있는 것인지 아니면 의도한 것인지 궁금합니다.

const onMessage = useCallback(
    (data: IDM) => {
      if (data.SenderId === Number(id) && myData.id !== Number(id)) {
        mutateChat((chatData) => {
          chatData?.[0].unshift(data);
          console.log(chatData);
         // 여기서 chatData가 변경됬음에도 불구하고 리렌더링이 일어나지 않습니다.
          return chatData;
        }, false).then(() => {
          if (scrollbarRef.current) {
            if (
              scrollbarRef.current.getScrollHeight() <
              scrollbarRef.current.getClientHeight() + scrollbarRef.current.getScrollTop() + 150
            ) {
              //console.log('scrollToBottom!', scrollbarRef.current?.getValues());
              setTimeout(() => {
                scrollbarRef.current?.scrollToBottom();
              }, 50);
            }
          }
        });
      }
    },
    [chatData, scrollbarRef],
  );