[React] useRef 사용해서 아래로 스크롤 이동

☘️ useRef 란?

useRef 는 React Hook 중 하나이며, 공식 문서에 따르면 useRef 를 다음과 같이 설명한다.

 

useRef
.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환하고, 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지
[출처: React 공식문서]

 

useRef 는 DOM 요소에 직접 접근하기 위해 사용되며, 변하는 값을 유지하기 위해 사용된다.

그래서 버튼을 눌러 원하는 요소로 스크롤하기 위해 Dom 요소에 직접 접근하는 useRef 가 사용된다.

 

☘️ 구현하기

화면 만들기

먼저 기본적인 화면을 만들어 준다.

// App.jsx
import './App.css';

function App() {
  return (
    <div>
      <div class="FirstDiv">
        <h1>버튼을 누르면 아래로 이동</h1>
        <button>버튼 클릭</button>
      </div>
      <div class="SecondDiv">
        <h1>이동완료</h1>
      </div>
    </div>
  );
}

export default App;

/* App.css */
.FirstDiv,
.SecondDiv {
  height: 95vh;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

 

useRef

useRef 를 사용하기 위해 import 해주고

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

scrollDownRef 라는 이름을 가진 ref 를 useRef 로 만든다.

const scrollDownRef = useRef();

그래서 scrollDownRef 라는 ref 두번째 div 에 할당해준다.

<div ref={scrollDownRef} class="SecondDiv">
  <h1>이동완료</h1>
</div>

 

scrollIntoView

scrollIntoView 란?

 

scrollIntoView
웹 브라우저가 제공하는 DOM 메소드로, 특정 요소가 사용자에게 보이도록 브라우저 창 내에서 스크롤하는 데 사용

더 자세한 사용 방법은 [mdn - scrollIntoView] 에서 볼 수 있다.

const scrollToRef = () => {
  scrollDownRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
};

scrollDownRef 라는 ref 가 할당되었으면 scrollIntoView 를 사용하여

스크롤이 부드럽게('smooth') 수직 정렬('block')로 끝('end') 으로 스크롤 해준다.

그러면 정상적으로 두번째 div 로 스크롤 된다.

결과1

 

+) useState, useEffect

위에 결과로 충분히 구현을 하였지만, 처음부터 스크롤이 있기 때문에 '버튼 클릭' 을 누르지 않아도 사용자가 임의로 스크롤을 내릴 수 있다.

 

만약 '버튼 클릭' 을 누르기 전에 이동완료 컴포넌트을 보여주지 않기 위해서 useState 와 useEffect 를 사용한다.

const [isVisible, setIsVisible] = useState(false);

const scrollToDown = () => {
  if (!isVisible) setIsVisible(true);
  else scrollToRef();
};

const scrollToRef = () => {
  scrollDownRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
};

useEffect(() => {
  if (isVisible) {
    scrollToRef();
  }
}, [isVisible]);


... (생략)

      {isVisible && (
        <div ref={scrollDownRef} class="SecondDiv">
          <h1>이동완료</h1>
        </div>
      )}

그러면 스크롤을 누르기 전 까지 isVisible 값이 false 라서 두 번째 div 가 보이지 않게 된다.
만약 스크롤을 누르면 isVisible 가 true 가 되고, isVisible 값이 변경되었기 때문에

useEffect 에서 scrollToRef() 함수를 호출하여 아래로 스크롤 된다.

 

그리고 처음부터 스크롤이 없기 때문에 사용자가 스크롤을 내릴 수 없고 무조건 '버튼 클릭' 을 눌러야 이동완료 컴포넌트가 보인다.

결과2

 

전체 코드

import React, { useRef, useState, useEffect } from 'react';
import './App.css';

function App() {
  const scrollDownRef = useRef();
  const [isVisible, setIsVisible] = useState(false);

  const scrollToDown = () => {
    if (!isVisible) setIsVisible(true);
    else scrollToRef();
  };

  const scrollToRef = () => {
    scrollDownRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
  };

  useEffect(() => {
    if (isVisible) {
      scrollToRef();
    }
  }, [isVisible]);

  return (
    <div>
      <div class="FirstDiv">
        <h1>버튼을 누르면 아래로 이동</h1>
        <button onClick={scrollToDown}>버튼 클릭</button>
      </div>
      {isVisible && (
        <div ref={scrollDownRef} class="SecondDiv">
          <h1>이동완료</h1>
        </div>
      )}
    </div>
  );
}

export default App;