[React/TypeScript] Hooks에서 특정 요소가 보이는 위치로 스크롤

환경

하고 싶었던 일

사전 준비

import React from 'react';

import { ChatRoom } from '../../interfaces/chats';
import ChatMessage from './ChatMessage';

interface Props {
  room: ChatRoom;
}

const ChatList: React.FC<Props> = ({ room }) => {
  return (
    <div>
      <div>
        {room.chats.map(chat => (
          <ChatMessage key={chat.id} chat={chat} />
        ))}
      </div>
    </div>
  );
};

export default ChatList;

import React from 'react';

import { Chat } from '../../interfaces/chats';

interface Props {
  chat: Chat;
}

const ChatMessage: React.FC<Props> = ({ chat }) => {
  return (
    <div>
      {!chat.fromMe && (
        <div>
          <img src={chat.photo} alt="User" />
        </div>
      )}
      <div>{chat.body}</div>
    </div>
  );
};

export default ChatMessage;

하위 구성 요소에서 상위 구성 요소로 ref 전달

import React, { useEffect, useRef } from 'react';

import { Chat } from '../../interfaces/chats';

interface Props {
  chat: Chat;
  setRef: (chat: Chat, ref: React.RefObject<HTMLDivElement>) => void;
}

const ChatMessage: React.FC<Props> = ({ chat, setRef }) => {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setRef(chat, ref);
  }, [setRef, chat, ref]);

  return (
    <div ref={ref}>
      {!chat.fromMe && (
        <div>
          <img src={chat.photo} alt="User" />
        </div>
      )}
      <div>{chat.body}</div>
    </div>
  );
};

export default ChatMessage;

상위 구성 요소에서 마지막 요소의 위치로 스크롤

import React from 'react';

import { ChatRoom } from '../../interfaces/chats';
import ChatMessage from './ChatMessage';

interface Props {
  room: ChatRoom;
}

const ChatList: React.FC<Props> = ({ room }) => {
  const setLastMessageElement = (chat: Chat, ref: React.RefObject<HTMLDivElement>) => {
    const lastChat = room.chats[room.chats.length - 1];
    if (chat.id === lastChat.id) {
      ref && ref.current && ref.current.scrollIntoView();
    }
  };

  return (
    <div>
      <div>
        {room.chats.map(chat => (
          <ChatMessage key={chat.id} chat={chat} setRef={setLastMessageElement} />
        ))}
      </div>
    </div>
  );
};

export default ChatList;

요약