배포 시 채팅 하단 스크롤 문제

배포 시 코드 

  useEffect(() => {
    const scrollToBottom = () => {
      endOfMessagesRef.current?.scrollIntoView({ behavior: 'smooth' });
    };
    scrollToBottom();
  }, [readChatRoomMessages]);

 

채팅창에 새로운 메시지가 들어오면 스크롤이 가장 하단으로 내려갈 수 있도록 구현해두었다.

 

yarn dev에서 문제없이 새로운 메시지가 들어오는 경우 하단으로 스크롤이 잘 이동되었다.

그리고 배포를 했는데 왠걸 새로운 메시지가 들어와도 스크롤이 자동으로 하단으로 내려가지 않았다.

 

또 아래와 같은 에러메시지가 나타난다 호출하지않았는데 왜 자꾸 호출이 되는건지 알다가도 모르겠다..

어려워 너란 녀슥.. 진짜로..................................

 

 

검색해보니 dom에 업데이트 되지 않았을 수도 있다고 하는데

useEffect를 사용해 주었는데.. 왜 문제가 될까.. 

 

너는 어디에서 요청이 되고 있는것일까.. serchParms로 받으면서 뭔가 문제가 있는걸까.. 

어디서 요청을 보내니.. 친구야? 나 너무슬퍼

 

수정된 코드

  useEffect(() => {
    const scrollToBottom = () => {
      setTimeout(() => {
        endOfMessagesRef.current?.scrollIntoView({ behavior: 'smooth' });
      }, 100);
    };
    if (readChatRoomMessages && readChatRoomMessages.length > 0) {
      scrollToBottom();
    }
  }, [readChatRoomMessages]);

 

자세히 보니 스크롤바가 튕겼다가 다시올라오는 느낌이다.

마지막메시지가 올라오기전에 스크롤바가 먼저 실행되나? 라는 말도안되는 억측을 가지고 setTimeout으로 시간을 조금 딜레이시켜주고 팀프로젝트 이므로 pr을 올린 후 팀원들과 수정부분을 함께 합쳐 테스트를 진행해 보아야겠다 하핳

 

그리고 다시 확인해보는 것으로.. 

되면 얼마나 이쁠까..🥹