페이지 이동 후 특정 섹션으로 스크롤 이동하기

1. 링크 이동 시 데이터 전달

          <Link to={`/attachment#description`} onClick={handleClickGoToDescription}>
            첨부방법
          </Link>

Link 로 특정 주소로 라우팅 할 때 query 데이터를 전달할 수 있습니다.

description 섹션으로 이동시킬 것이기 때문에
hash #description을 전달합니다.

 

2. 데이터 읽어들이기

  const location = useLocation();
  const isDescriptionIndex = location.hash.includes("description");

useLocation 함수를 이용하여 hash에 담긴 데이터가 description일 경우에는 true를 반환하도록 합니다.

 

3. 이동시킬 위치 정하기

  const AttachDescriptionBoxRef = useRef<HTMLDivElement>(null);


    <AttachDescriptionBox id="attachMethod" ref={AttachDescriptionBoxRef}>
    </AttachDescriptionBox>

useRef를 이용하여 컴포넌트를 선택합니다.

 

4. 스크롤 이벤트 실행하기

const scrollToEvent = (top: number, behavior: ScrollBehavior) => {
  window.scrollTo({
    top,
    behavior,
  });
};

  useEffect(() => {
    if (isDescriptionIndex && AttachDescriptionBoxRef.current) {
      setTimeout(() => {
        scrollToEvent(AttachDescriptionBoxRef.current!.offsetTop - 50, "smooth");
      }, 10);
    }
  }, [location, isDescriptionIndex]);

description hash가 포함되어 있고, ref 의 데이터가 존재할 때

해당 ref의 offsetTop - 50 으로 이동시키도록 합니다.

 

5. 부모 컴포넌트에도 스크롤 이벤트가 존재할 경우 setTimeout

  useEffect(() => {
    if (isDescriptionIndex && AttachDescriptionBoxRef.current) {
      setTimeout(() => {
        scrollToEvent(AttachDescriptionBoxRef.current!.offsetTop - 50, "smooth");
      }, 10);
    }
  }, [location, isDescriptionIndex]);

이벤트가 겹치게 되어 부모 컴포넌트의 스크롤 이벤트가 동작하므로 스크롤 이벤트가 제대로 동작하지 않을 수 있습니다.

setTimeout으로 이벤트를 약간 지연시켜 실행하도록 하여 해결했습니다.