useRef로 스크롤 조작하기

특정 div태그들에 직접 접근해서 해당 위치로 스크롤을 이동시키기 위해, ref를 사용했다.

 

사용 방법

1) 원하는 변수명으로 useRef() 선언

2) 선택하고자 하는 DOM node(virtual DOM element)에 ref 속성 추가
3) 필요한 곳에서 변수명.current로 꺼내 쓰기!

 

 

useRef에 하나의 element가 아니라, 리스트로 여러 개의 element를 넣을 수도 있다!

 

const tabRef = useRef([]);

.
.
.

<TabContents ref={el => (tabRef.current[0] = el)}>...</TabContents>
<TabContents ref={el => (tabRef.current[1] = el)}>...</TabContents>
<TabContents ref={el => (tabRef.current[2] = el)}>...</TabContents>

 

- 단, 사용할 때는 콜백 함수 형태로 넣어줘야한다. ( ref={} 내부에서 함수를 호출하면 인자로 DOM node가 들어온다. )

 

 

보통 element.scrollIntoView()와 같이 사용한다. 

** 공식문서에보면 

 

다른 요소의 레이아웃에 따라 위쪽 또는 아래쪽으로 완전히 스크롤되지 않을 수 있습니다

따라서 css로 고정 헤더를 줄 경우, position을 fixed를 줄 때와 sticky를 줄 경우 레이아웃 높이 확인해서 계산해야한다. 

 

1) 해당 header의 높이와 window.scrollY 값 구해서 계산한다.

 

var node="select your element";
var yourHeight="height of your fixed header";

// scroll to your element
node.scrollIntoView(true);

// now account for fixed header
var scrolledY = window.scrollY;

if(scrolledY){
  window.scroll(0, scrolledY - yourHeight);
}

 

 

2) scroll-margin-top CSS 속성 사용 

: scroll-margin-top수직 스크롤 대상을 변경하여 대상 요소를 뷰포트 상단에서 멀어지게 한다. 

 

* {
  scroll-margin-top: 100px;
}

 

 

3) 고정 헤더의 offset을 사용한다. 

 

var topOfElement = document.querySelector('#targetElement').offsetTop - 고정헤더의높이;
window.scroll({ top: topOfElement, behavior: "smooth" });

 

 

 

출처

https://spectrum.chat/react/help/how-to-create-refs-for-items-in-a-loop-using-useref~e9b810bd-2755-44aa-aa1f-d7c3e5560cba

How to create refs for items in a loop using useRef? · React

https://chanhuiseok.github.io/posts/react-7/

[React] ref란? - DOM에 직접 접근하기(useRef)

https://velog.io/@syj9484/React-Hooks-useRef%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9D%B4%EB%8F%99

React Hooks - useRef를 이용한 스크롤 이동

https://zih0.tistory.com/16

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

https://velog.io/@dosilv/ReactWeb-API-useRef-scrollIntoView

[React/Web API] useRef (+scrollIntoView)

https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView

element.scrollIntoView - Web API | MDN

https://rotadev.com/using-scrollintoview-with-a-fixed-position-header-dev/

Using scrollIntoView with a fixed position header – Dev – RotaDEV.com