React의 useRef와 useEffect 사용하기
useRef 훅 사용하기
useRef는 React 컴포넌트에서 DOM 요소를 직접 접근할 수 있게 해주는 훅입니다. 이를 사용하여 특정 DOM 요소의 참조(ref)를 생성하고, 이를 통해 해당 요소를 직접 조작할 수 있습니다.
const messagesEndRef = useRef<HTMLLIElement>(null);
여기서 HTMLLIElement는 참조될 DOM 요소의 타입을 지정합니다. 이 경우에는 li 태그의 참조를 생성하고 있습니다.
useEffect 훅으로 스크롤 자동화 구현
useEffect는 컴포넌트의 렌더링 결과가 화면에 반영된 후에 실행되는 작업을 정의할 수 있습니다. 이 훅을 사용하여 채팅 목록이 업데이트될 때마다 자동으로 스크롤을 최하단으로 이동시키는 로직을 구현할 수 있습니다.
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [chatList]);scrollIntoView 메서드는 해당 요소가 사용자에게 보이도록 브라우저 창에서 스크롤하는 기능을 제공합니다. behavior: 'smooth' 옵션을 통해 스크롤이 부드럽게 이동하도록 설정할 수 있습니다.
의존성 배열인 [chatList]에 chatList를 넣어주면, chatList 배열의 내용이 업데이트될 때마다 이 효과가 실행됩니다.
스크롤을 맨 아래로 내리는 요소 배치
스크롤을 내리고자 하는 위치에 li 태그를 배치하고, ref 속성을 통해 messagesEndRef를 연결합니다.
<li ref={messagesEndRef} />