React 특정 DOM으로 스크롤 이동시키기

ref

리액트에서 ref는 DOM에 직접 접근할 때 사용합니다.
저는 특정 div태그들에 직접 접근해서 해당 위치로 스크롤을 이동시키기 위해, 이 ref를 사용했습니다.

import React, { useRef } from 'react';

function HomePage() {
      ...
    const homeRef = useRef<HTMLDivElement>(null);
    ...

    return (
        <div ref={homeRef}>
        ...
        </div>
    )

}

이 처럼 div태그에 homeRef를 지정해주었습니다.
이제 클릭 이벤트를 생성해서, 해당 ref 위치로 가게 설정해보겠습니다.

function HomePage() {
      ...
    const homeRef = useRef<HTMLDivElement>(null);
    const onHomeClick = () => {
    homeRef.current?.scrollIntoView({ behavior: 'smooth' });
      };

    return (
        <div ref={homeRef}>
        ...
          <button onClick={onHomeClick}></button>
        </div>
    )
}

scrollIntoView 를 이용해 해당 위치로 스크롤을 움직일 수 있습니다.
이때 {behavior: 'smooth'} 옵션을 주면 부드럽게 스크롤이 이동하는걸 확인할 수 있습니다.

다른 컴포넌트에 있는 DOM에 ref 설정하기

처음에는 단순하게 컴포넌트 props로 ref를 넣어줬는데 당연히 안됐습니다. 핳

그래서 찾아보니 공식문서에 forwardRef 가 있었고, 이를 사용해서 컴포넌트로 ref를 전달할 수 있었습니다.

일단 네비게이션 컴포넌트를 만들어 네비게이션의 메뉴를 통해 클릭 이벤트를 실행시키도록 아래와 같이 작성했습니다.

function HomePage() {
  const homeRef = useRef<HTMLDivElement>(null);
  const contactRef = useRef<HTMLDivElement>(null);

  const onHomeClick = () => {
    homeRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  const onContactClick = () => {
    contactRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div ref={homeRef}>
      <Navbar
        onHomeClick={onHomeClick}
        onContactClick={onContactClick}
      />
      <Contact ref={contactRef} />
    </div>
  );
}

Contact 컴포넌트는 아래와 같이 forwardRef를 사용합니다.

import React, { forwardRef } from "react";

const Contact = forwardRef<RefType, PropsType>((props, ref) => { 

return (
        <div ref={ref}>
        ...  
        </div>
       )

});

forwardRef로 화살표 함수를 감싼것을 확인할 수 있습니다.
첫번째는 props를 의미하고 두번째는 ref를 의미합니다.

ref:
https://ko.reactjs.org/docs/forwarding-refs.html