React에서 '아래로 스크롤' 기능을 구현하는 방법은 다음과 같습니다. 이 글에서는 1)페이지 하단, 2) 채팅 하단, 3) div 및 테이블 하단으로 스크롤하는 방법에 대해 설명합니다.

목차
1. React에서 하단으로 스크롤하는 버튼
2. React의 마운트에서 하단으로 스크롤
3. React에서 테이블의 하단으로 스크롤
4. React에서 채팅의 하단으로 스크롤
5. React의 Refs

React에서 하단으로 스크롤하는 버튼

페이지 하단으로 스크롤하려면 메인 컨테이너에서 scrollIntoView() 메서드를 호출합니다. scrollIntoView() 메서드에 옵션 인수를 전달합니다.

블록 속성을 사용하면 요소의 어느 부분으로 스크롤할지 지정할 수 있습니다. 'end'을 지정하면 scrollIntoView()가 호출되는 요소의 맨 아래로 이동합니다.
이 경우 메인 컨테이너에서 이 메서드를 호출합니다. 따라서 버튼을 클릭하면 페이지 하단으로 이동합니다.

상세

scrollIntoView()는 DOM의 모든 요소에 사용할 수 있는 네이티브 메서드입니다. 호출되면 해당 요소로 스크롤하여 뷰포트에 표시되도록 합니다.
스크롤 가능한 긴 컨테이너가 있는 경우 <div> 요소에서 scrollIntoView() 메서드를 호출하여 하단 끝을 표시할 수 있습니다.
scrollIntoView()는 옵션 객체를 인수로 받습니다. 블록 옵션을 사용하여 요소의 어느 부분(이 경우 끝/아래쪽)을 뷰로 스크롤할지 지정할 수 있습니다.

이 기능을 구현하려면 DOM 요소에 대한 참조가 필요합니다.
먼저 빈 참조를 저장할 변수를 생성합니다(useRef(null)의 결과). 그런 다음 <div> 요소의 참조 프로퍼티를 이 변수로 설정합니다.
그러면 <div> DOM 요소에 대한 참조가 저장된 div 변수에서 scrollIntoView()를 호출할 수 있습니다.
마지막으로 버튼 엘리먼트를 생성하고 메인 컨테이너에서 scrollIntoView() 메서드를 호출하도록 버튼 엘리먼트의 onClick 이벤트 핸들러를 설정합니다.

CodeSandbox로 이동하여 라이브 데모를 확인할 수도 있습니다.

React의 마운트에서 아래로 스크롤

이렇게 하려면 메인 컨테이너에서 scrollIntoView() 메서드를 호출해야 합니다.
또한 컨테이너 요소에 대한 참조를 생성하기 위해 useRef() 훅이 필요합니다.

import "./styles.css";
import { useRef } from "react";

export default function App() {
  const div = useRef(null)
  return (
    <div className="App" ref={div}>
      <h1>Welcome to web application</h1>
    </div>
  );
}

마지막으로 컴포넌트가 마운트될 때 scrollIntoView() 메서드를 호출하려면 useEffect() 훅이 필요합니다.

import "./styles.css";
import { useRef, useEffect } from "react";

export default function App() {
  useEffect(()=> div.scrollIntoView({behavior: "smooth", block:"end"}), [])
  const div = useRef(null)
  return (
    <div className="App" ref={div}>
      <h1>Welcome to web application</h1>
    </div>
  );
}

아시다시피, 빈 배열 []을 두 번째 인수로 useEffect() 훅에 전달하면 컴포넌트가 마운트될 때만 실행된다는 의미입니다.

상세

먼저 메인 컨테이너에 대한 참조를 만들어야 합니다. 페이지 하단으로 스크롤하고 싶습니다. 따라서 전체 페이지의 콘텐츠를 감싸는 컨테이너가 필요합니다.

빈 ref를 저장할 변수를 생성하기만 하면 됩니다.

const div = useRef(null);

그런 다음 요소의 ref 프로퍼티를 이 변수로 설정합니다.

<div className="App" ref={div}>

이제 React 엘리먼트가 해당 변수에 연결됩니다.

다음으로, 이 변수가 마운트될 때 이 변수에서 scrollIntoView()를 호출해야 합니다. 컴포넌트 클래스의 경우 componentDidMount() 생명주기 메서드에서 이 작업을 수행할 수 있습니다.

함수형 컴포넌트에서는 useEffect() 훅으로 이 작업을 수행할 수 있습니다.

useEffect() 훅의 첫 번째 인수(콜백 함수)는 메인 컨테이너에서 scrollIntoView()를 호출해야 합니다. 두 번째 인수는 빈 배열이어야 합니다. 그러면 컴포넌트가 마운트될 때만 사이드 이펙트가 실행됩니다.

export default function App() {
  useEffect(()=> div.scrollIntoView({behavior: "smooth", block:"end"}), [])
  const div = useRef(null)
  return (
    <div className="App" ref={div}>
      <h1>Welcome to web application</h1>
    </div>
  );
}

block: 'end' 옵션은 scrollIntoView()가 메인 컨테이너의 맨 아래로 스크롤하도록 지시합니다.

React에서 표 하단으로 스크롤

많은 데이터 행이 있는 스크롤 가능한 표가 있는 경우 표 하단으로 스크롤하는 버튼이 필요할 수 있습니다.

이전 예제와 동일한 기본 단계를 따릅니다. 빈 ref(useRef(null))를 변수에 저장하고 <table> 요소의 ref 속성을 해당 변수로 설정합니다. 이제 해당 변수에서 scrollIntoView()를 호출할 수 있습니다.

이 경우 onClick 이벤트 핸들러가 있는 버튼이 있습니다. 이 버튼은 테이블 하단으로 스크롤하기 위해 동일한 scrollIntoView() 메서드를 사용합니다.

React에서 채팅 하단으로 스크롤

React에서 아래로 스크롤 기능의 또 다른 예를 살펴보겠습니다.

<Message> 컴포넌트를 표시하는 간단한 채팅 상자가 있습니다. 사용자가 새 메시지를 입력할 때마다 컴포넌트는 새 <Message> 컴포넌트를 생성하고 채팅의 맨 아래로 스크롤합니다.

메시지 배열에는 각 <Message> 컴포넌트에 대한 텍스트가 포함됩니다.

또한 사용자가 메시지를 입력하고 보내기를 누를 수 있는 <input> 필드도 필요합니다.

사용자가 'send' 버튼을 클릭하면 채팅 하단에 메시지가 표시되어야 하며, 이 메시지로 스크롤해야 합니다.

여기서 풀어야 할 것이 많습니다.

먼저 메시지를 감싸는 두 개의 <div> 컨테이너에 대해 설명하겠습니다.

바깥쪽 <div>(클래스명이 'chatbox'인)는 채팅 상자를 나타내며, 높이가 고정되어 있어야 하고 많은 메시지를 수용하기 위해 스크롤이 가능해야 합니다.

안쪽 <div>는 <Message> 컴포넌트를 직접 감싸고 있습니다. 이 컴포넌트는 부모 컨테이너의 모든 공간을 차지합니다.

하나는 일반 채팅창처럼 고정된 높이를 유지하므로 두 개의 컨테이너가 필요합니다. 다른 하나는 모든 메시지를 감싸고 사용자가 새 메시지를 입력하면 확장됩니다.

높이가 고정된 컨테이너의 하단으로 스크롤하면 하단 테두리까지 스크롤됩니다.

우리는 채팅창의 하단 테두리까지 스크롤하는 것이 아니라 마지막 메시지까지 스크롤하고 싶습니다. 그렇기 때문에 메시지가 포함된 내부 <div>에서 scrollIntoView()를 호출합니다.

메시지 상태 변수는 배열입니다. 각 항목은 메시지로 표시해야 하는 문자열입니다. 사용자가 'send'를 클릭하면 이 배열에 현재 메시지를 추가해야 합니다.

또한 useEffect() 훅을 변경합니다. 메시지가 있을 때마다 아래로 스크롤해야 합니다. 따라서 종속성 목록에 메시지 상태 변수(메시지 배열)를 추가합니다.

useEffect()는 상태 변수의 변경을 감지하면 사이드 이펙트(컨테이너에서 scrollIntoView()를 호출)를 실행하는 식으로 작동합니다.

React의 Refs

자바스크립트 개발자는 getElementById() 메서드를 사용할 수 있습니다. HTML 엘리먼트를 변수에 저장하고 자바스크립트 코드 내에서 사용하는 데 사용됩니다.

React에서는 ref라는 것을 사용하여 동일한 작업을 수행합니다. 이는 DOM 엘리먼트를 참조합니다.

위의 예시에서는 함수형 컴포넌트가 있으므로 useRef() 훅을 사용하여 참조 값을 초기화하여 div 변수에 저장합니다. 그런 다음 기본 <div> 요소의 ref 속성을 설정하여 컨테이너에 대한 참조를 저장합니다.

React에서 특정 스크롤 위치를 설정하려면 scrollTo() 메서드를 사용할 수 있습니다.

원문 : react-scroll-to-bottom