React 버튼 클릭 시 스크롤 이동!!

현재 Next.JS로 만들고 있는 웹 애플리케이션에서 버튼을 클릭하면 원하는 div로 이동할 수 있도록 구현하려고 한다!

처음엔 라이브러리를 이용하려고 했으나..!!

useRef에 구현해놓은 메서드가 이미 존재했다.

다음은 공식 Doc페이지이다!! 참고하자

MDN

사용방법은 다음과 같다.

.....

  const element = useRef<HTMLDivElement>(null);
  const onMoveBox = () => {
    element.current?.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  
.....

          <div
            onClick={onMoveBox}
          />
          //여기를 클릭하면!
        <div
         ref={element}
         className="w-full h-screen relative flex flex-col"
      	></div>
          //여기로 이동!!!

성공!!👍