💬 채팅 자동 스크롤 기능 구현

채팅방에서는 실시간으로 메시지가 오간다.
새로운 메시지가 도착할 때 사용자가 불편함 없이 내용을 확인할 수 있도록 하기 위해 자동 스크롤 기능이 필요했다.

처음에는 단순히 새로운 메시지가 도착하면 최하단으로 이동하도록 구현했는데,
사용자가 스크롤을 직접 올려서 이전 메시지를 보고 있을 경우에도 새로운 메시지가 올 경우를 고려해야한다는 생각이 들었다...

❓ 구현 목표

그래서 채팅방에 스크롤과 관련해서 일어날 수 있는 경우들에 대해 생각해 보았다.

📍 구현 시 고려한 부분

• 초기 렌더링 시 가장 최신 메시지로 이동
• 새로운 메시지가 도착하면 사용자가 하단에 있을 경우 자동 스크롤
• 사용자가 스크롤을 조작했을 경우 자동 스크롤 중단
• 자동 스크롤이 중단된 경우 새 메시지에 대한 알림 필요 및 사용자가 알림을 클릭할 경우 자동 스크롤
• 무한 스크롤을 활용하여 이전 메시지 불러올 때 현재 위치 유지

---

❗️ 구현 방법

먼저 초기 렌더링, 채팅 목록 컨테이너 등을 감지하기 위해 useRef를 활용했고,
상단과 하단 감지를 위해 IntersectionObserver를 활용했다.

📍 초기 렌더링될 때 최신 메시지가 보이도록 스크롤 이동하기

useEffect(() => {
  	// 초기 렌더링이 아닐 경우 리턴
    if (!isInitial.current) return;
  	// 채팅 목록 컨테이너가 없을 경우 리턴
    if (!chatContainerRef.current) return;
  	// 채팅메세지가 없을 경우 리턴
    if (chatMsgs.length === 0) return;

    chatContainerRef.current.scrollTo({
        top: chatContainerRef.current.scrollHeight,
        behavior: 'smooth',
    });
  	// 초기 렌더링이 끝나면 false로 설정해 다음 부터 이 코드 블록이 실행되지 않도록 한다.
    isInitial.current = false;
}, [chatMsgs]);

처음에는 의존성 배열에 아무것도 담지 않아 초기 렌더링 시에만 실행되도록 구현했었는데,
소켓 이벤트에 대한 처리가 완료되기 전에 실행되어 제대로 스크롤 되지 않는 경우가 발생했다.

그래서 소켓 이벤트 처리가 완료되어 채팅 메시지가 생기면 실행되도록 의존성 배열에 채팅 메시지를 넣어주고,
초기 렌더링인지를 구분할 수 있는 useRef를 따로 설정했다.

📍 `IntersectionObserver로 스크롤 위치 감지하기

 const lastChatRef = useCallback((node: HTMLDivElement) => {
    if (lastObserverRef.current) lastObserverRef.current.disconnect();

    lastObserverRef.current = new IntersectionObserver(
      ([entry]) => {
        // 하단에 스크롤이 도착하면 새로운 메시지 알림 UI 상태 false 설정
        if (entry.isIntersecting) {
          setIsNewMsg(false);
        }
        // 관찰 요소, 즉 하단의 마지막 채팅 메세지가 화면에서 들어오거나 나갈 때 마다 실행
        // 화면에 관찰 요소가 있으면 true, 없으면 false
        setIsNearBottom(entry.isIntersecting);
      },
      
      { threshold: 0.1 }
    );

    if (node) {
      lastObserverRef.current.observe(node);
    }
  }, []);

✅ entry.isIntersecting: 관찰 대상이 뷰포트와 교차할 때 마다 실행된다.

📍 사용자가 마지막 메시지를 보고 있을 때 새 메시지 수신 시 자동 스크롤

  useEffect(() => {
    if (!chatContainerRef.current) return;

    // intersectionObserver를 통해 하단 인식 && 새 메시지 수신 시 설정한 state가 true 일때 자동 스크롤
    if (isNearBottom && isNewMsg) {
      chatContainerRef.current.scrollTo({
        top: chatContainerRef.current.scrollHeight,
        behavior: 'smooth',
      });
    }
  }, [chatMsgs]);

📍 사용자가 위쪽 스크롤 중 새 메시지 수신 시 클릭 UI 조건부 렌더링

{!isNearBottom && newMsg && isNewMsg && (
	<NewChatMsg
		nickname={nickname}
     	// 새 메시지 수신 이벤트 발생 시 해당 내용을 상태로 저장해서 활용
        message={newMsg}
        chatContainerRef={chatContainerRef}
        setNewMsg={setNewMsg}
	/>
)}

// 해당 UI를 클릭할 경우 실행되는 함수
const handleNewMsg = () => {
    if (!chatContainerRef.current) return;

  	// 채팅방 최하단으로 스크롤 이동
    const container = chatContainerRef.current;
    container.scrollTo({
      top: container.scrollHeight,
      behavior: 'smooth',
    });

  	// 새 메시지 내용 상태 null로 변경
    setNewMsg(null);
  };

📍 무한 스크롤 적용하기( 이전 채팅 불러오기 )

const handleScroll = useCallback(() => {
    if (!chatContainerRef.current) return;

    const { scrollTop } = chatContainerRef.current;

  	// 최상단에 닿고, nextCursor가 있을 경우 이전 채팅 불러오기 요청
    if (scrollTop === 0 && nextCursor) {
      if (debounceTimeout.current) return;

      debounceTimeout.current = setTimeout(() => {
        socket.emit(CHAT.HISTORY.FETCH, {
          roomId: chatRoomId,
          cursor: nextCursor,
        });

        socket.on(CHAT.HISTORY.FETCHED, handleGetChatting);

        setTimeout(() => {
          debounceTimeout.current = null;
        }, 100);
      }, 300);
    }
  }, [chatRoomId, nextCursor]);

스크롤이 최상단에 닿았을 때, nextCursor를 활용하여 이전 메세지를 호출한다.
debounceTimeout으로 과도한 요청 발생을 방지한다.

const handleGetChatting = ({ chatHistory, nextCursor }: ChatHistoryData) => {
  	// 초기 렌더링이 아닌 경우에만 호출
    if (!isInitial.current) {
      // 새 메시지 상태를 false로 설정하여 하단으로 스크롤되는 것 방지
      setIsNewMsg(false);
      setChatMsgs(() => {
        const currentMsgs = chatMsgsRef.current;

        // 기존 메시지의 중복 없는 아이디 배열 생성
        const existingMsgIds = new Set(currentMsgs.map((msg) => msg.id));
        // 기존 메시지와 중복되지 않은 메시지만 담은 이전 메시지 배열 생성
        const filteredNewMsgs = chatHistory.filter(
          (msg) => !existingMsgIds.has(msg.id)
        );

        // 중복 제거된 이전 메시지와 현재 메시지를 차례로 담은 updatedMsgs 배열을 생성하여 반환
        const updatedMsgs = [...filteredNewMsgs, ...currentMsgs];

        return updatedMsgs;
      });

      // 다음 이전 메시지 호출을 위한 nextCursor 재설정
      setNextCursor(nextCursor ?? null);

      // 기존 스크롤 위치로 스크롤을 다시 내려준다.
      if (chatContainerRef.current) {
        const currentScrollHeight = chatContainerRef.current.scrollHeight;
        chatContainerRef.current.scrollTo({
          top: currentScrollHeight * 0.057,
        });
      }
    }
  };

이전 메시지를 요청했을 때,

기존에 이미 렌더링 된 채팅 메시지가 중복으로 서버에서 넘어오는 경우가 있는 것을 확인했다.
이 메시지가 다시 중복으로 렌더링되는 것을 방지하기 위해
메시지의 아이디로 검사를 한 뒤 중복된 메시지는 제거하고 렌더링 해준다.

---

✨ 구현 결과와 느낀점

채팅은 실시간으로 이벤트가 발생하다 보니 다른 페이지들에 비해

초기 로딩, 새로운 메시지 수신, 새로운 메시지 수신 시의 상황, 과거 메시지 불러오기, 스크롤의 위치 등 다양한 상황을 고려해야 했다. 많은 가능성을 고민해서 자연스러운 UX를 제공할 수 있도록 노력했다.

또 기능 구현만이 문제가 아니라 이벤트 리스너 정리가 매우매우 중요했다.
일단 구현에 집중해서 만들다 보면 이벤트 리스너가 제대로 정리 되지 않아서 메모리 누수가 발생하는 상황이 생겼다.

앞으로 실시간 채팅 환경에서 더 나은 UX 제공 및 최적화를 위해 개선을 더 해볼 예정이다 !