React) TS - 이벤트 발생 시 element의 스크롤 상단으로 이동 시키기 (1)

2022-02-25

테이블의 필터 & 페이지 이동을 했을 때, 데이터가 로딩이 되어도 Scroll이 최상단으로 이동이 되지 않는 이슈였습니다.

단, 브라우저 크기가 작을 때만 나타나는 이슈...

window에서 Scroll을 상단으로 이동시키는 방법은 다양했지만, 컴포넌트로 되어있었기 때문에 Scorll을 상단으로 보내는 것에 대한 연구가 필요했습니다.

ScrollTo나 ScrollTop 등 다양한 방법들이 있었지만, 해당 상황에서 적용이 힘들었습니다.

그래서 선택한 방법이 getElementById를 활용한 ScrollIntoView

개인적으로 이방법 저방법 사용하다.. 얻어걸린 느낌도 있기도 했고, id 대신 ref를 사용하는 현재 업무 시스템에서 추후 더 좋은 방법이 있으면 고쳐야 될 수 있다고 생각이 들었습니다.

사용 방법은 간단했습니다.

<div id='scrollTop'>
	// 스크롤이 생성되는 컴포넌트
    {tableMarkup}
</div>

스크롤이 생성되는 컴포넌트를 div로 감싼 후 id 값을 지정해줬습니다.

해당 id 값의 element를 최상단으로 올리는 함수 값을 지정해줬습니다.

const scrollToTop = () => {
  // document.getElementById("해당 ID 값").scrollIntoView(필요한 값)
	document.getElementById("scrollTop").scrollIntoView(true);
}

여기서 필요한 값을 알아봤을 때,
1. true = 상단으로 이동
2. false = 하단으로 이동
3. ({option}) = 원하는 옵션 방법으로 이동
ex) ({behavior: "smooth", block: "end"}) = "smooth" 효과로 block의 "end"로 이동
4. scrollIntoView() 값에 빈칸을 넣는 방법도 있지만 테스트한 결과 true 값과 같이 상단으로 이동 됨.
=> 혹시나 다른 이벤트가 발생할 수 있으니 추후 확인되면 내용 변경 예정

이제 함수 값을 정렬 함수 값에 같이 넣어주었습니다.

const handleFilter = useCallback(() => {
  scrollToTop()
  if (filter) {
    ****
  }
}, [])

이제 테스트를 진행