refactor(chat): beforeId 기반 무한 스크롤 구현 및 최적화#42
Conversation
Summary of ChangesHello @tnemnorivnelee, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 채팅방 메시지 목록에 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
beforeId 기반의 무한 스크롤 구현을 위해 useInfiniteQuery를 도입하고, React.memo와 useCallback을 활용하여 성능을 최적화하는 등 전반적으로 훌륭한 리팩터링입니다. 코드 구조가 개선되었고, 무한 스크롤 관련 로직이 명확하게 구현되었습니다.
다만, useChatRoomMessages 훅에서 성능을 더욱 향상시킬 수 있는 두 가지 지점을 발견했습니다.
첫째, 현재 refetchInterval 설정은 폴링 시마다 모든 페이지의 데이터를 다시 불러와 불필요한 네트워크 요청을 유발할 수 있습니다. 이를 첫 페이지만 리프레시하도록 개선하는 것이 좋습니다.
둘째, 메시지 데이터를 UI에 맞게 변환하는 로직을 useInfiniteQuery의 select 옵션으로 옮기면, React Query의 내장 메모이제이션을 활용하여 렌더링 성능을 더욱 최적화할 수 있습니다.
자세한 내용은 아래의 개별 리뷰 코멘트를 참고해주세요.
There was a problem hiding this comment.
Pull request overview
이 PR은 채팅 메시지 목록에 beforeId 기반 무한 스크롤을 구현하고, TanStack Query의 useInfiniteQuery를 도입하여 효율적인 페이지네이션을 구현합니다.
Changes:
useInfiniteQuery로 채팅 메시지 조회 로직 전환 및 beforeId 기반 페이지네이션 구현- Mock API에 beforeId/size 파라미터 지원 추가
- 날짜 구분선 렌더링 로직을 내림차순 데이터에 맞게 최적화
React.memo와useCallback을 사용한 성능 최적화
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/features/chat/hooks/useChatRoomMessages.ts | useQuery를 useInfiniteQuery로 전환하고 중복 제거 로직 추가 |
| src/features/chat/hooks/useSendMessage.ts | InfiniteQuery 캐시 구조에 맞춰 메시지 전송 시 캐시 업데이트 로직 수정 |
| src/features/chat/api/mockChatRoomMessages.ts | beforeId/size 파라미터를 받는 페이지네이션 로직 추가 |
| src/features/chat/api/chatMessages.ts | Mock API 호출을 래핑하는 getChatRoomMessages 함수 추가 |
| src/features/chat/utils/message.ts | 날짜 구분선 생성 로직을 내림차순 데이터에 맞게 재작성 |
| src/features/chat/screens/ChatRoomScreen.tsx | 무한 스크롤 관련 props를 ChatMessageList에 전달 |
| src/features/chat/components/ChatMessageList.tsx | onEndReached 핸들러 추가 및 성능 최적화 |
| src/features/chat/components/ChatMessage.tsx | React.memo로 래핑하여 불필요한 리렌더링 방지 |
| src/features/chat/components/ChatRoomItem.tsx | React.memo로 래핑하여 불필요한 리렌더링 방지 |
| src/features/chat/components/ChatRoomList.tsx | renderItem과 keyExtractor를 useCallback으로 최적화 |
…nto refactor/chat-infinite-scroll-beforeid
🔗 관련 이슈
Resolves: #41
📝 작업 내용
beforeId파라미터를 사용하는 무한 스크롤 로직을 구현했습니다.beforeId기반 페이지네이션을 추가하였습니다.useInfiniteQuery도입:useInfiniteQuery구조로 전환했습니다.onEndReached연결 및 최적화:onEndReached를 연결하여 하단 도달 시 추가 데이터를 로드하며, 중복 호출을 방지하도록 처리했습니다.useInfiniteQuery캐시 데이터 구조에 맞춰 캐시를 업데이트하도록 로직을 일원화했습니다.memo,useCallback):React.memo와useCallback을 사용하여 리스트 아이템 리렌더링을 최소화하고 스크롤 성능을 개선했습니다.📷 스크린샷 (UI 작업인 경우)
N/A
💬 리뷰어에게
app/(tabs)/_layout.tsx파일에서 사용되지 않는 ref에 대한 린트 경고가 발생할 수 있습니다. 이는 레이아웃 관련 ref로, 현재 사용되지 않더라도 구조 유지 차원에서 남겨둔 것이니 참고 바랍니다.✅ 기본 체크리스트
yarn start빌드 에러 없음)console.log나 주석을 제거했나요?yarn format을 실행하여 코드 스타일을 정렬했나요?yarn lint를 실행하여 린트 에러가 없나요?🏗️ 구조 체크리스트 (Self-Check)
파일 및 폴더
features/안에 두었나요? (❌shared/ui금지)shared/ui에 두었나요?index.ts방지)상태 관리 & 네이밍
is,has,should로 시작하나요?🚀 모든 체크리스트를 확인한 후 PR을 생성하세요!