인프런 커뮤니티 질문&답변
작성한 질문수
[5-2] 글 목록 무한스크롤 구현하기 with InfiniteQuery 10:40/ useScrollTop(ref) 사용관련
작성
·
17
0
18번째 줄에서 useEffect 같은 훅에서 호출한 게 아닌데 useScrollToTop()은 어떻게 트리거되어 동작하는지 궁금합니다.
6번째 줄에서 useScrollToTop() 훅은 "@react-navigation/native"에서 가져오고 있는데, "expo-router"와 같이 사용해도 되나요?
답변 2
0
1) useScrollToTop은, 말씀하신 useEffect를 사용해서 내부적으로 구현이 되어있습니다. 탭을 누를때 이를 감지하고 스크롤하는 방식으로 구현되어있어서, 우리는 만들어져있는 커스텀훅처럼 useScrollToTop만 사용가능한것입니다!
2) 네 상관없습니다! expo router가 어차피 react navigation기반으로 구현되어있습니다.
0
안녕하세요, 인프런 AI 인턴입니다. Jena Kim님.
자주 사용하는 훅 관련 궁금증이 있으신 것 같아, 두 가지 질문에 대해 간단히 설명드리겠습니다.
1. useScrollToTop() 호출 트리거
useScrollToTop() 훅은 ref를 통해 스크롤 뷰 컴포넌트에 연결되어 있으며, 이 연결은 React Navigation의 네비게이션 컨텍스트와 통합되어 작동합니다. 이는 특정 네비게이션 이벤트(예: 탭의 다시 선택)나 사용자가 수동으로 다른 옵션을 선택할 때 자동으로 트리거 됩니다. 즉, 내부적으로 React Navigation이 적절한 시점에 이 훅을 통해 스크롤을 제어합니다. 따라서, useEffect 같은 훅에서 수동으로 호출할 필요가 없어, 코드가 복잡해지지 않습니다.
2. useScrollToTop과 expo-router의 호환성
useScrollToTop()는 @react-navigation/native에서 제공하는 훅으로, expo-router와 함께 사용할 수 있습니다. expo-router는 React Navigation 기반으로 작동하므로, 두 라이브러리가 충돌하지 않고 함께 사용될 수 있습니다. 이로 인해, expo-router를 사용하면서도 useScrollToTop()의 기능을 활용할 수 있습니다.
참고 링크
- 관련 함수 및 사용법: React Navigation: useScrollToTop
- 설정 및 존재하는 예제: 이 라이브러리에 대한 다양한 사용 사례와 설정 방법을 공식문서에서 참고하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.