기본개념

  const handleFollow = () => {
    const { scrollTop, scrollHeight, clientHeight } 
    = document.documentElement;

    const heightMax = scrollHeight - clientHeight;
    const heightPercent = scrollTop / heightMax;

    setscrol(heightPercent * 100);

  }

스크롤의 퍼센트를 구해서 width 에 연결해 놓는다.

 const watch = () => {
     window.addEventListener('scroll', handleFollow);
   }
   watch(); // addEventListener 함수를 실행
   //go_style();

   return () => {
     window.removeEventListener('scroll', handleFollow); // addEventListener 함수를 삭제
   }

scroll 할시 함수를 선언하라는 의미이다.
removeEvent 를 선언!

useRef

은 queryselct 의 개념과 비슷하다. react 는 동적 dom 이기 때문에 실행되고 있는 dom이 있어 에러가 발생하기 때문에 useref 을 사용한다.

const Ref = useRef([]);
배열로 하나의 ref만 선언한후

    <div
        style={{
          width: '100%',
          height: '100vh',
          backgroundColor: 'blue'
        }}

        ref={(el) => Ref.current[1] = el}>

      </div>

ref = 현재 ref 는 선언한 Ref.current 배열에 1 로 넣어주세요 라는 의미이다.

  ReviewRef.current[1].scrollIntoView({ behavior: "smooth" });

클릭시 이동하게 해주세요 라는 의미이다.
=
걸어놓은 ref 로 이동시켜주세요 !