useRef로 스크롤 이동시키기

특정 탭을 클릭하면 탭에 해당하는 내용 부분으로 스크롤이 이동했으면 좋겠다는 요구사항이 생겨서 기록 겸 적어보려고 한다. 

 

리액트에서는 특정 컴포넌트에 어떤 동작을 수행하고 싶을 때 useRef를 사용할 수 있기 때문에 useRef를 사용했다.

 

짧은 예시)

const ScrollExample = () => {
  const scrollRef = useRef(null);

  const onClickToMove = () => {
    scrollRef.current.scrollIntoView({
      behavior: 'smooth',
    })
  }

  return (
    <>
      <div ref={scrollRef}>이 곳으로 이동</div>
      <button onClick={onClickToMove}>클릭 !</button>
    </>
  );
};

*scrollIntoView 는 특정 앨리먼트 위치로 스크롤을 이동시켜주는 내장 메서드이다.

옵션으로

- block (수직 요소에 대한 옵션)

- inline (수평 요소에 대한 옵션)

- behavior (스크롤시 움직임에 대한 옵션)

이 있다. 

 

*추가로 getBoundingClientRect() 메서드란 것도 있는데, 해당 메서드는 앨리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환한다. 

반환값 예시)

{x: 50, y: 50, width: 260, height: 260, top: 50, right: 410,bottom: 410, left: 50}