[refactor] match 리스트 컴포넌트 렌더링 최적화#44
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
안녕하세요. 매칭 내역 리스트의 렌더링 최적화 작업을 해주셨네요. FlatList의 성능 특성을 잘 이해하고 useCallback과 React.memo를 적절히 활용하여 최적화를 진행한 점이 인상적입니다. PR 설명에 메모이제이션의 비용과 이점에 대해 명확히 정리해주셔서 리뷰어가 의도를 파악하기 좋았습니다.
한 가지 추가적인 개선 제안을 MatchHistoryList.tsx 파일에 남겼습니다. renderItem 함수를 컴포넌트 외부로 추출하여 useCallback 훅 없이도 안정적인 참조를 유지하는 방법에 대한 내용입니다.
전반적으로 깔끔하고 목적이 뚜렷한 좋은 리팩터링이라고 생각합니다. 수고하셨습니다!
There was a problem hiding this comment.
Pull request overview
이 PR은 FlatList 렌더링 최적화를 위해 MatchHistoryList와 MatchHistoryListItem 컴포넌트에 메모이제이션을 적용합니다. React Native의 FlatList는 리스트 아이템이 많을 때 렌더링 성능에 민감하므로, 콜백 함수 참조 안정화와 컴포넌트 메모이제이션이 효과적입니다.
Changes:
renderItem함수를useCallback으로 감싸 함수 참조 안정화ItemSeparatorComponent를 컴포넌트 외부 함수로 분리하여 재생성 방지MatchHistoryListItem에React.memo적용으로 불필요한 리렌더 방지
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/features/match/components/MatchHistoryList.tsx | renderItem과 ItemSeparatorComponent를 메모이제이션하여 FlatList 렌더링 최적화 |
| src/features/match/components/MatchHistoryListItem.tsx | React.memo를 적용하여 props 변경 시에만 리렌더되도록 개선 |
…nto refactor/match-list-rendering-optimization
🔗 관련 이슈
Resolves: #43
📝 작업 내용
MatchHistoryList.tsx: renderItem을 useCallback으로 감싸고, ItemSeparatorComponent를 외부 함수로 분리MatchHistoryListItem.tsx: React.memo 적용📷 스크린샷 (UI 작업인 경우)
N/A (렌더링 최적화로 UI 변경 없음)
💬 리뷰어에게
왜 이 작업을 했나요?
useCallback이나React.memo는 무조건 좋은 게 아닙니다.메모이제이션 자체도 비용(메모리 저장, 비교 연산)이 발생하기 때문에,
리렌더 방지 이득 > 메모이제이션 비용일 때만 사용해야 합니다.
하지만 FlatList는 예외입니다.
React Native 공식적으로
renderItem에 안정적인 함수 참조를 권장하고,리스트 아이템이 많아질수록 인라인 함수로 인한 불필요한 리렌더 비용이 커지기 때문입니다.
적용한 최적화
useCallbackReact.memochat 기능과 패턴 일관성을 위해 match에도 동일하게 적용했습니다.
✅ 기본 체크리스트
yarn start빌드 에러 없음)console.log나 주석을 제거했나요?yarn format을 실행하여 코드 스타일을 정렬했나요?yarn lint를 실행하여 린트 에러가 없나요?🏗️ 구조 체크리스트 (Self-Check)
파일 및 폴더
features/안에 두었나요? (❌shared/ui금지)shared/ui에 두었나요?index.ts방지)상태 관리 & 네이밍
is,has,should로 시작하나요?