inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Tạo ứng dụng cộng đồng avatar (React Native Expo)

[5-2] Triển khai cuộn vô hạn danh sách bài viết với InfiniteQuery

[5-2] 글 목록 무한스크롤 구현하기 with InfiniteQuery 10:40/ useScrollTop(ref) 사용관련

84

Jena Kim

1 câu hỏi đã được viết

0

image.png

  1. 18번째 줄에서 useEffect 같은 훅에서 호출한 게 아닌데 useScrollToTop()은 어떻게 트리거되어 동작하는지 궁금합니다.

  1. 6번째 줄에서 useScrollToTop() 훅은 "@react-navigation/native"에서 가져오고 있는데, "expo-router"와 같이 사용해도 되나요?

react-native typescript expo react-hook-form react-query

Câu trả lời 2

0

Kyo

 1) useScrollToTop은, 말씀하신 useEffect를 사용해서 내부적으로 구현이 되어있습니다. 탭을 누를때 이를 감지하고 스크롤하는 방식으로 구현되어있어서, 우리는 만들어져있는 커스텀훅처럼 useScrollToTop만 사용가능한것입니다!

2) 네 상관없습니다! expo router가 어차피 react navigation기반으로 구현되어있습니다.

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. Jena Kim님.

자주 사용하는 훅 관련 궁금증이 있으신 것 같아, 두 가지 질문에 대해 간단히 설명드리겠습니다.

1. useScrollToTop() 호출 트리거

useScrollToTop() 훅은 ref를 통해 스크롤 뷰 컴포넌트에 연결되어 있으며, 이 연결은 React Navigation의 네비게이션 컨텍스트와 통합되어 작동합니다. 이는 특정 네비게이션 이벤트(예: 탭의 다시 선택)나 사용자가 수동으로 다른 옵션을 선택할 때 자동으로 트리거 됩니다. 즉, 내부적으로 React Navigation이 적절한 시점에 이 훅을 통해 스크롤을 제어합니다. 따라서, useEffect 같은 훅에서 수동으로 호출할 필요가 없어, 코드가 복잡해지지 않습니다.

2. useScrollToTopexpo-router의 호환성

useScrollToTop()@react-navigation/native에서 제공하는 훅으로, expo-router와 함께 사용할 수 있습니다. expo-router는 React Navigation 기반으로 작동하므로, 두 라이브러리가 충돌하지 않고 함께 사용될 수 있습니다. 이로 인해, expo-router를 사용하면서도 useScrollToTop()의 기능을 활용할 수 있습니다.

참고 링크

  • 관련 함수 및 사용법: React Navigation: useScrollToTop
  • 설정 및 존재하는 예제: 이 라이브러리에 대한 다양한 사용 사례와 설정 방법을 공식문서에서 참고하실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

secureTextEntry 설정에 관해

0

58

2

expo 55 tabs 사라짐 이슈

0

82

2

백엔드도 궁금합니다!

1

85

1

댓글 버튼 하단에 고정되지 않는 이슈

0

53

1

SafeAreaView 적용 기준 문의

0

81

2

스크린 옵션 아이콘

0

55

2

[Note] 안드로이드 네비게이션 헤더 이슈 안내

0

65

2

ActionSheet

0

86

1

안드로이드 폰과 PC에서 테스트할때 화면 안보임과 오류 문의

0

99

1

iOS 빌드 후 실기기에서 앱 시작

1

70

1

클라이언트 사이드에서 세션 관련 질문

0

81

2

Android 에뮬레이터 환경설정 및 실행 (for Mac) 에러 문의

0

112

1

[5-13] useLikePost 쿼리 구현 중 Tanstack Query 관련 질문

0

63

1

Expo 54 버전 ios에서 headerLeft

1

139

2

어플 개발 후 배포 시에 주의할 사항이 있을까요?

0

78

1

코드 수정 시 ios 시뮬레이터에서 자동반영이 안 되는데 왜그럴까요?

0

92

1

텍스트가 다 상단위로 올라가있는데 어떻게 해야할까요?

0

78

2

Axios Network error...

0

151

2

강의는 52버전인데 expo가 현재 54버전이에요

0

308

1

[TIP] SafeAreaView 사용할 때마다 자꾸 ios에서 위아래가 빵꾸 나시는 분들 필독

0

235

2

키보드 이슈 관련 해결 질문

0

74

1

android header를 ios처럼 바꾸기

0

70

1

CustomButton 코드 버튼 관련 질문

0

66

1

ios 시뮬로 보다가 android 시뮬로 넘어갈려니깐 오류가 생겨요

0

106

2