Merged
Conversation
hyesngy
approved these changes
May 23, 2025
Member
hyesngy
left a comment
hyesngy
left a comment
There was a problem hiding this comment.
이번 주 워크북을 통해 React의 성능 최적화 기법인 debounce와 throttle을 적용해봤습니다! 쉽지 않은 개념이지만 모두 잘 해내셔서 대단합니다! 👏🏻👏🏻👏🏻
이런 최적화 기법들은 실제 서비스에서 UX를 크게 향상시키는 요소입니다. 앞으로 있을 데모데이 프로젝트에서도 꼭 활용해서 구현해보면 좋겠습니다!👍🏻👍🏻👍🏻
Comment on lines
+26
to
+50
| // fetchNextPage 호출 여부를 throttle된 값으로 관리 | ||
| const [shouldFetch, setShouldFetch] = useState(false); | ||
| const throttledShouldFetch = useThrottle(shouldFetch, 1000); // 1초에 한 번만 true로 바뀜 | ||
|
|
||
| useEffect(() => { | ||
| if (throttledShouldFetch) { | ||
| fetchNextPage(); | ||
| setShouldFetch(false); | ||
| } | ||
| }, [throttledShouldFetch, fetchNextPage]); | ||
|
|
||
| useEffect(() => { | ||
| const handleScroll = () => { | ||
| if ( | ||
| window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 100 && | ||
| hasNextPage && | ||
| !isFetchingNextPage | ||
| ) { | ||
| setShouldFetch(true); | ||
| } | ||
| }; | ||
|
|
||
| window.addEventListener('scroll', handleScroll); | ||
| return () => window.removeEventListener('scroll', handleScroll); | ||
| }, [hasNextPage, isFetchingNextPage]); |
Member
There was a problem hiding this comment.
현재 LpListPage에서는 직접 스크롤 이벤트를 관리하고 있는데, 이미 구현된 useInfiniteScroll훅을 활용하지 않고 있습니다. 재사용 가능한 컴포넌트를 활용하면 코드 중복을 줄이고 유지보수가 용이해집니다. useInfiniteScroll훅을 사용하여 스크롤 로직을 분리하면 코드의 가독성이 향상되고 컴포넌트의 책임을 명확히 할 수 있을 것 같아요!
Comment on lines
+26
to
+35
| // fetchNextPage 호출 여부를 throttle된 값으로 관리 | ||
| const [shouldFetch, setShouldFetch] = useState(false); | ||
| const throttledShouldFetch = useThrottle(shouldFetch, 1000); // 1초에 한 번만 true로 바뀜 | ||
|
|
||
| useEffect(() => { | ||
| if (throttledShouldFetch) { | ||
| fetchNextPage(); | ||
| setShouldFetch(false); | ||
| } | ||
| }, [throttledShouldFetch, fetchNextPage]); |
Member
There was a problem hiding this comment.
현재 throttle처리를 위해 shouldFetch 상태와 throttledShouldFetch를 함께 사용하고 있는데, 스크롤 이벤트에서 바로 throttle된 함수를 호출하는 방식으로 변경하면 상태 관리가 줄어들어 코드가 더 간결해지고 이해하기 쉬워집니다. 이벤트 핸들러에 직접 throttle을 적용하는 방식으로 개선해보면 어떨까요?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📝 미션 번호
8주차 Misson 1, 2
📋 구현 사항
📎 스크린샷
bandicam.2025-05-20.01-15-40-878.mp4
✅ 체크리스트
🤔 질문 사항