Create Week8 Mission1, 2 #104
Conversation
hyesngy
left a comment
hyesngy
left a comment
There was a problem hiding this comment.
์ด๋ฒ ์ฃผ ์ํฌ๋ถ์ ํตํด React์ ์ฑ๋ฅ ์ต์ ํ ๊ธฐ๋ฒ์ธ debounce์ throttle์ ์ ์ฉํด๋ดค์ต๋๋ค! ์ฝ์ง ์์ ๊ฐ๋
์ด์ง๋ง ๋ชจ๋ ์ ํด๋ด์
์ ๋๋จํฉ๋๋ค! ๐๐ป๐๐ป๐๐ป
์ด๋ฐ ์ต์ ํ ๊ธฐ๋ฒ๋ค์ ์ค์ ์๋น์ค์์ UX๋ฅผ ํฌ๊ฒ ํฅ์์ํค๋ ์์์ ๋๋ค. ์์ผ๋ก ์์ ๋ฐ๋ชจ๋ฐ์ด ํ๋ก์ ํธ์์๋ ๊ผญ ํ์ฉํด์ ๊ตฌํํด๋ณด๋ฉด ์ข๊ฒ ์ต๋๋ค!๐๐ป๐๐ป๐๐ป
| // 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]); |
There was a problem hiding this comment.
ํ์ฌ LpListPage์์๋ ์ง์ ์คํฌ๋กค ์ด๋ฒคํธ๋ฅผ ๊ด๋ฆฌํ๊ณ ์๋๋ฐ, ์ด๋ฏธ ๊ตฌํ๋ useInfiniteScrollํ
์ ํ์ฉํ์ง ์๊ณ ์์ต๋๋ค. ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ฅผ ํ์ฉํ๋ฉด ์ฝ๋ ์ค๋ณต์ ์ค์ด๊ณ ์ ์ง๋ณด์๊ฐ ์ฉ์ดํด์ง๋๋ค. useInfiniteScrollํ
์ ์ฌ์ฉํ์ฌ ์คํฌ๋กค ๋ก์ง์ ๋ถ๋ฆฌํ๋ฉด ์ฝ๋์ ๊ฐ๋
์ฑ์ด ํฅ์๋๊ณ ์ปดํฌ๋ํธ์ ์ฑ
์์ ๋ช
ํํ ํ ์ ์์ ๊ฒ ๊ฐ์์!
| // fetchNextPage ํธ์ถ ์ฌ๋ถ๋ฅผ throttle๋ ๊ฐ์ผ๋ก ๊ด๋ฆฌ | ||
| const [shouldFetch, setShouldFetch] = useState(false); | ||
| const throttledShouldFetch = useThrottle(shouldFetch, 1000); // 1์ด์ ํ ๋ฒ๋ง true๋ก ๋ฐ๋ | ||
|
|
||
| useEffect(() => { | ||
| if (throttledShouldFetch) { | ||
| fetchNextPage(); | ||
| setShouldFetch(false); | ||
| } | ||
| }, [throttledShouldFetch, fetchNextPage]); |
There was a problem hiding this comment.
ํ์ฌ throttle์ฒ๋ฆฌ๋ฅผ ์ํด shouldFetch ์ํ์ throttledShouldFetch๋ฅผ ํจ๊ป ์ฌ์ฉํ๊ณ ์๋๋ฐ, ์คํฌ๋กค ์ด๋ฒคํธ์์ ๋ฐ๋ก throttle๋ ํจ์๋ฅผ ํธ์ถํ๋ ๋ฐฉ์์ผ๋ก ๋ณ๊ฒฝํ๋ฉด ์ํ ๊ด๋ฆฌ๊ฐ ์ค์ด๋ค์ด ์ฝ๋๊ฐ ๋ ๊ฐ๊ฒฐํด์ง๊ณ ์ดํดํ๊ธฐ ์ฌ์์ง๋๋ค. ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ์ง์ throttle์ ์ ์ฉํ๋ ๋ฐฉ์์ผ๋ก ๊ฐ์ ํด๋ณด๋ฉด ์ด๋จ๊น์?
๐ ๋ฏธ์ ๋ฒํธ
8์ฃผ์ฐจ Misson 1, 2
๐ ๊ตฌํ ์ฌํญ
๐ ์คํฌ๋ฆฐ์ท
bandicam.2025-05-20.01-15-40-878.mp4
โ ์ฒดํฌ๋ฆฌ์คํธ
๐ค ์ง๋ฌธ ์ฌํญ