React에서 하단으로 스크롤 기능 구현

1. React의 Scroll-to-Bottom 기능
2. React에서 맨 아래로 스크롤 기능을 구현하기 위한 클래스 구성 요소 만들기
3. React에서 아래로 스크롤 기능을 구현하기 위한 기능적 구성 요소 만들기

최신 애플리케이션은 때때로 정보로 과부하가 걸리므로 스크롤은 개발자가 고객의 관심을 관리하고 우수한 사용자 경험을 제공하는 데 도움이 되는 기능 중 하나입니다.

React는 엄청나게 빠른 단일 페이지 애플리케이션을 구축하기 위한 라이브러리입니다. React 개발자는 최고의 사용자 경험을 제공하는 최신 기능으로 애플리케이션을 구축할 수 있습니다.

당연히 React에서 스크롤링 기능을 구현하는 방법에 대한 질문이 있을 수 있습니다. 이 기사에서는 React에서 아래로 스크롤 기능을 추가하는 방법을 살펴봅니다.

React의 Scroll-to-Bottom 기능

React에서 컨테이너 요소의 맨 아래로 자동 스크롤을 구현하기 위해 refs 및 기본 Element.scrollIntoView() 메서드를 사용합니다.

React에서 refs의 정의

웹 개발자는 일반적으로 refs를 사용하여 HTML 요소에 대한 참조를 변수에 저장합니다. JavaScript 함수 및 메서드에서 이 변수를 사용할 수 있습니다.

요약하면 refs는 JavaScript의 요소 작업을 더 쉽게 해줍니다.

React는 DOM을 직접 다루지 않기 때문에 라이브러리의 공식 문서에서는 refs를 가능한 한 적게 사용할 것을 권장합니다. 그래도 React에서 컨테이너 맨 아래로 스크롤하려면 refs가 필요합니다.

Element 인터페이스를 사용하면 요소 자체에 대한 메서드를 호출할 수 있습니다. scrollIntoView()는 사용자 화면에 표시되도록 특정 요소로 강제 스크롤하는 데 사용할 수 있는 메서드 중 하나입니다.

짐작하셨겠지만 refs를 사용하여 집중할 요소를 지정합니다.

React에서 맨 아래로 스크롤 기능을 구현하기 위한 클래스 구성 요소 만들기

ES6 구문을 도입한 이후 React 개발자는 클래스 구성 요소를 쉽게 작성할 수 있습니다. 더 이상 고민하지 않고 React 클래스 구성 요소에서 아래로 스크롤 기능을 구현하는 방법을 살펴보겠습니다.

class Messages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: [
        "message 1",
        "message 2",
        "message 3",
        "message 4",
        "message 5",
        "message 6",
        "message 7",
        "message 8",
        "message 9",
        "message 10",
        "message 11",
        "message 12",
        "message 13",
        "message 14",
        "message 15",
        "message 16",
        "message 17",
        "message 18"
      ]
    };
  }
  messagesEndRef = React.createRef();

  componentDidMount() {
    this.scrollToBottom();
  }
  componentDidUpdate() {
    this.scrollToBottom();
  }
  scrollToBottom = () => {
    this.messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
  };
  render() {
    return (
      <div>
        {this.state.messages.map((message) => (
          <h1>{message}</h1>
        ))}
        <div ref={this.messagesEndRef} />
      </div>
    );
  }
}
export default Messages;

이 라이브 데모를 확인하면 이 애플리케이션에 애플리케이션의 메시지를 나타내는 <h1> 요소로 가득 찬 스크롤 가능한 컨테이너가 있음을 알 수 있습니다. 애플리케이션이 다시 로드될 때마다 사용자는 자동으로 페이지 하단으로 이동합니다.

따라서 온라인 채팅이 있는 경우 페이지를 다시 로드할 때마다 맨 아래에 있는 가장 최근 메시지로 이동하도록 이 기능을 구현할 수 있습니다.

이제 코드에서 진행되는 작업을 요약해 보겠습니다.

1. 여기에 Messages 클래스 구성 요소가 있습니다. 먼저 messagesEndRef 변수를 만들고 React.createRef() 메서드로 설정하여 ref를 초기화합니다.

2. 그런 다음 컨테이너 하단에 빈 <div> 요소를 생성하고 ref 속성을 this.messagesEndRef로 설정합니다.

   빈 <div>는 공간을 차지하지 않기 때문에 필요하므로 육안으로 눈에 띄지 않습니다. <h1> 요소 뒤에 배치하여 항상 상위 컨테이너의 마지막 요소가 되도록 합니다.

   따라서 스크롤을 아래로 내리기 위한 기준점으로 사용하기 딱 좋은 요소입니다.

3. JSX에서 클래스 인스턴스의 messagesEndRef 속성 참조와 같은 JavaScript 표현식을 작성하려면 중괄호가 필요합니다.

   다음 단계에서는 scrollToBottom() 함수를 작성하여 맨 아래로 스크롤해야 합니다. 이 함수 내에서 messagesEndRef 변수의 current 속성에 액세스하고 scrollIntoView() 메서드를 호출합니다.

   불필요하지만 스크롤이 부드러워야 한다고 지정할 수 있습니다. 이 옵션은 훨씬 더 나은 사용자 경험을 제공합니다.

4. 그런 다음 수명 주기 메서드 componentDidMount() 및 componentDidUpdate()를 사용하여 이 클래스에 정의된 scrollToBottom() 메서드를 호출합니다. componentDidMount() 수명 주기 메서드는 구성 요소가 로드될 때마다 이 함수를 실행합니다.

   따라서 사용자가 메시징 앱을 로드할 때마다 맨 아래로 이동하여 가장 최근 메시지를 읽습니다. componentDidUpdate() 수명 주기 메서드는 상태 속성이 변경될 때 이 함수를 호출합니다.

   새 메시지가 상태에 추가될 때마다 구성 요소가 다시 렌더링되어 사용자를 가장 최근 메시지로 안내합니다.

5. 마지막으로 간단한 <div> 컨테이너를 반환합니다. 여기에서 상태 속성의 모든 값을 살펴보고 <h1> 요소로 표시합니다.

   우리는 또한 빈 <div>를 가지고 있는데, 우리는 이것을 React에게 스크롤할 위치를 알려주는 앵커링 포인트로 사용합니다.

React에서 아래로 스크롤 기능을 구현하기 위한 기능적 구성 요소 만들기

React v16.8 릴리스 이후 기능적 구성 요소에는 클래스 구성 요소에 독점적이었던 모든 기능이 있습니다.

특히 useState() 기능을 사용하여 기능 구성 요소의 상태를 초기화할 수 있습니다. useRef() 후크는 이전 예제의 라이프스타일 메소드를 대체할 수 있습니다.

또한 createRef() 메서드 대신 핵심 react 패키지에서 useRef() 후크를 가져옵니다.

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

const Messenger = () => {
  const [messages, setMessages] = useState([
        "message 1",
        "message 2",
        "message 3",
        "message 4",
        "message 5",
        "message 6",
        "message 7",
        "message 8",
        "message 9",
        "message 10",
        "message 11",
        "message 12",
        "message 13",
        "message 14",
        "message 15",
        "message 16",
        "message 17",
        "message 18"
      ])
  const bottom = useRef(null)

  const scrollToBottom = () => {
    bottom.current.scrollIntoView({ behavior: "smooth" })
  }

  useEffect(() => {
    scrollToBottom()
  }, [messages]);

  return (
    <div>
          {messages.map(message => <h1>{message}</h1>)}
          <div ref={bottom}></div>
    </div>
  )
}

이제 위의 코드 예제를 요약해 보겠습니다.

1. 먼저 상태를 초기화하고 메시지 배열과 동일하게 설정했습니다. useState() 후크도 업데이트 기능을 생성하여 필요한 경우 더 많은 메시지를 추가할 수 있습니다.

2. 그런 다음 useRef() 후크를 사용하여 ref를 초기화하고 bottom 변수에 저장했습니다. 빈 div의 ref 속성을 이 변수와 동일하게 설정합니다. 중괄호를 사용하는 것을 잊지 마십시오.

3. 그런 다음 이전 예제의 함수와 거의 동일한 scrollToBottom 함수를 구현합니다.

   ref의 current 속성과 scrollIntoView() 메서드에 액세스합니다. 여기에도 부드러운 스크롤 옵션을 추가합니다.

4. 마지막으로 useEffect() 후크를 사용하여 이전의 두 수명 주기 메서드를 대체합니다.

   후크는 두 개의 인수를 사용하며 하나는 구성 요소가 마운트될 때마다 실행되는 함수입니다. 두 번째 인수는 주의해야 할 상태 변수의 배열입니다.

   messages 상태 변수의 값이 변경되면 useEffect()도 함수를 실행합니다. 이는 componentDidUpdate() 수명 주기 후크를 사용하는 것과 동일한 결과를 얻습니다.