chat, scroll to bottom 자동 스크롤

채팅 부분을 담당하던 중 채팅을 지속하게 되면 스크롤이 생기지만 자동으로 화면이 내려가지 않은 것을 해결해보는 경험을 했다.

전체 채팅 UI 중 아래 부분에 스크롤이 오면 이벤트가 실행되게 해주자

    <MessageSectionBox>
      {t.map((data) => {
        return (
          <div key={v4()}>
            {data.uid !== authService.currentUser.uid ? (
              <>
                <MessageSection>
                  <MessageImageBox>
                    <MessageImage src={data.profileImg} alt="" />
                  </MessageImageBox>
                  <MessageTextBox>
                    <MessageNickName>{data.nickName}</MessageNickName>
                    <MessageContent>{data.comment}</MessageContent>
                  </MessageTextBox>
                </MessageSection>
              </>
            ) : (
              <>
                <MyMessageSection>
                  <MyMessageTextBox>
                    <MyMessageNickName>{data.nickName}</MyMessageNickName>
                    <MyMessageContent>{data.comment}</MyMessageContent>
                  </MyMessageTextBox>
                  <MyMessageImageBox>
                    <MyMessageImage src={data.profileImg} />
                  </MyMessageImageBox>
                </MyMessageSection>
              </>
            )}
          </div>
        );
      })}
      <div ref={scrollRef} />
    </MessageSectionBox>

태그 아래쪽에 이게 보일 것이다.

const scrollRef = useRef();

<div ref={scrollRef} />

useRef를 이용해서 현재 위치를 파악해준다.

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, []);

useEffect를 통해 스크롤이 해당위치로 왔을 때 스크롤 이벤트를 발생시켜준다.