TIL) 스파르타 개발일지 23-01-12

모바일에서 scroll to top 버튼 구현하기.

 

첫번째 방법 모바일에서 스크롤을 구현하는 방법이 두가지가 있는데

첫번째는 ScollView이고, 두번째는 FlatList이다.

 

ScollView에서가 아닌 FlatList를 사용시에 가능한 코드

  const scrollToTop = () => { 
    setMinVisibleIndex(0);
    setMaxVisibleIndex(0);
    flatListRef.current.scrollToIndex({ index: 0, animated: true });
  };

 

 

두번째 방법.

(웹에서 썼던 방법이다. 당연히 될 수가 없지... 실패)

  // useEffect(() => {
  //   const ShowButtonClick = () => {
  //     if(window.scrollY > 200){
  //       setShowButton(true)
  //     }else{
  //       setShowButton(false)
  //     }
  //   }
  //   window.addEventListener("scroll",ShowButtonClick)
  //   return () => {
  //     window.removeEventListener("scroll", ShowButtonClick)
  //   }
  // }, []);

 

세번째 방법.

  const scrollRef = useRef();

   const scrolltoTop = () => {
  scrollRef.current?.scrollTo({
    y: 0,
    animated: true,
  });
}




return (
.
.
.
<CommunityTopBtn  onPress={scrolltoTop}> //터치 시 onPressTouch 함수가 실행
  <AntDesign name="up" size={20} color="#312070" />// 탑 버튼 이미지
</CommunityTopBtn>

<ScrollView ref={scrollRef}>
//스크롤 뷰 안에 대충 내용이 들어갈 공간
<ScrollView>

항상 해결하고 나면 기분은 좋지만... 너무 허무하다.

 

세번째 방법까지 안됐으면, FlatList로 구조를 갈아엎을 생각이였다.

(사실 엎다가 회귀함...)

 

 

---

뒤늦게 찾아보니 RecyclerListView라는 녀석도 있더라... 각 스크롤 뷰의 특성이 정리된 표이다.

No	ScrollView	FlatList	RecyclerListView
메모리 관리	메모리 관리 없음	자동 메모리 관리	자동 메모리 관리 ( FlatList와 비슷함 )
렌더링	모든 콘텐츠를 한 번에 불러옴	스크롤에 따라 콘텐츠를 로드함	스크롤에 따라 콘텐츠를 로드함
Scroll Context	데이터가 갱신 된 경우, Scroll의 Position이 보존되지 않음	데이터가 갱신 됭 경우, Scroll의 Position이 보존되지 않음	데이터가 갱신 되어도, Scroll의 Position이 보존됨
Performance	눈에띄는 프레임 드랍	Data set이 많은 경우에, 눈에 띄는 프레임 드랍 발생 ( > 1500 )	프레임 드랍 없음, Performance가 가장 높음
Data update	데이터 갱신 시의 issue 있음	데이터 갱신 시의 issue 있음	Data를 갱신하거나 update 하기 좋음
사용법	import {ScrollView} from 'react-native'	import {FlatList} from 'react-native'	3rd-party module을 사용해서 사용 RecyclerListView, DataProvider, LayoutProvider } from "recyclerlistview" https://github.com/Flipkart/recyclerlistview
난이도	설정하기 쉬움	설정하기 쉬움	설정하기 쉬움, 문서가 불친절