한 줄의 코드 + React 후크로 채팅 앱 자동 스크롤

WhatsApp, twitch 또는 소셜 미디어 애플리케이션을 사용하는 동안 새 메시지를 보내거나 받을 때 채팅 피드가 자동으로 맨 아래로 스크롤됩니다. 채팅 기능이 있는 애플리케이션을 구축하는 동안 이것은 확실히 제공해야 하는 중요한 기능입니다.

내가 실제로 말하는 내용을 이해하지 못한다면 내가 만든 이 작은 데모를 사용해 보십시오. 메시지를 입력하고 Enter 키를 누릅니다. 새 메시지를 보내면 메시지가 사라지고 스크롤해야 볼 수 있습니다.

If you want to try this interactive demo live head over to my original blog post.

사실 이 문제를 해결하는 것은 매우 간단합니다. 먼저 모든 채팅을 래핑하는 컨테이너 요소를 알아야 합니다. 그런 다음 요소를 선택하고 scrollHeight 을 사용하여 높이를 가져온 다음 scrollTop 을 사용하여 요소의 세로 스크롤 높이를 설정합니다.

그게 다야.

const el = document.getElementById('chat-feed');
// id of the chat container ---------- ^^^
if (el) {
  el.scrollTop = el.scrollHeight;
}

이것이 구현된 새로운 데모입니다. 이제 새 메시지가 들어올 때 맨 아래로 스크롤됩니다.



이제 반응 구현에 와서 useRef & useEffect를 사용하여 요소에 액세스하고 부작용을 처리합니다.

이것은 dep에 대한 종속성이 될 인수로 useEffect를 취하고 채팅 컨테이너 요소에 전달할 ref를 반환합니다.

import React from 'react'

function useChatScroll<T>(dep: T): React.MutableRefObject<HTMLDivElement> {
  const ref = React.useRef<HTMLDivElement>();
  React.useEffect(() => {
    if (ref.current) {
      ref.current.scrollTop = ref.current.scrollHeight;
    }
  }, [dep]);
  return ref;
}

위 후크의 사용법:

const Chat = () => {
  const [messages , setMessages] = React.useState([])
  const ref = useChatScroll(messages)
  return(
    <div ref={ref} >
      {/* Chat feed here */}
    </div>
  )
}