-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
19강 인피니티 스크롤 IntersectionObserver 코드 위치 수정이 필요합니다.
22.10.19 15:57 작성 조회수 209
1
gatsby develop 시에는 문제가 안되지만, gatsby build 시에 문제가 되는 부분입니다.
참고한 사이트는 아래와 같습니다.
https://stackoverflow.com/questions/59424347/gatsby-intersectionobserver-is-not-defined
마지막 코드 observer 부분은 하기 내용과 같은데
const observer: IntersectionObserver = new IntersectionObserver(
(entries, observer) => {
if (!entries[0].isIntersecting) return;
setCount(value => value + 1);
observer.disconnect();
},
)
useEffect(() => setCount(1), [selectedCategory])
useEffect(() => {
if (
NUMBER_OF_ITEMS_PER_PAGE * count >= postListByCategory.length ||
containerRef.current === null ||
containerRef.current.children.length === 0
)
return
observer.observe(
containerRef.current.children[containerRef.current.children.length - 1],
)
}, [count, selectedCategory])
IntersectionObserver 구문을 useEffect 안으로 넣어야 할 것 같습니다.
useEffect(() => setCount(1), [selectedCategory])
useEffect(() => {
const observer: IntersectionObserver = new IntersectionObserver(
(entries, observer) => {
if (!entries[0].isIntersecting) return;
setCount(value => value + 1);
observer.disconnect();
}
)
if (
NUMBER_OF_ITEMS_PER_PAGE * count >= postListByCategory.length ||
containerRef.current === null ||
containerRef.current.children.length === 0
) return
observer.observe(
containerRef.current.children[containerRef.current.children.length - 1]
)
}, [count, selectedCategory])
답변을 작성해보세요.
0
답변 1