[React] Intersection Observer로 무한스크롤 만들어본 후기

이 글에서 써보고 후기를 남기겠다고 했기에 까먹기전에 적기!

 

Intersection Observer이란?

let observer = new IntersectionObserver(callback(entries, observer) [, option]);

 

target을 정하고 그 target이 기기 뷰포트나 특정 요소와 교차할 때 콜백을 생성한다.

callback : target에 교차가 일어났을 때 호출되는 함수

entries : IntersectionObserverEntry 객체 리스트를 배열 형식으로 반환

 

그래서 작성한 코드

(1) intersecting이 일어날 시, IncreasePage를 호출 + 로딩중 문구를 보이도록 true로 설정

로딩중 문구!

(2) IncreasePage가 불려서 Page가 +1 됐기 때문에, useEffect가 호출 됨

isLoading : true일 시 가장 맨 처음에 접속 시 보여지는 "로딩중" 화면을 보여줌 → false이므로 안보임

isLoadingMore : true일 시 새 항목들을 불러올 때 가장 밑에서 "로딩중" 문구를 보여줌 → false로 만듬

(3) movies가 변경돼서 useEffect 호출되고, 위에서 만들었던 triggerRef도 까먹지말고 불러서 observe 한다.

observe 하다가 intersecting 일어날 시, (1)로 돌아간다!

그리고 클린업에서 감시를 해제하지 않으면 큰일이 나게 되는데...

 

큰일의 예) 만약 10의 배수마다 target을 심었다고 치면 10, 20, 30... 번째의 가장 마지막 아이템이 보여질 때 추가 로딩이 돼야 한다. 처음에 사이트에 들어가서 스크롤을 쭉 내려서 50개의 아이템을 로딩한 뒤 페이지의 top으로 이동했다면, 다시 쭉 내려가서 50번째 아이템을 봐야 51~60번째 아이템이 로딩이 될 텐데.........

disconnect를 하지 않으면 10, 20, 30, 40번째 아이템에도 target이 남아있어서 50까지 가지 않았는데도 추가로 아이템이 막 불려진다. 

💡cleanup 함수?
component가 unmount될 때(사라질때) || update 되기 직전에 불려짐 
unmount 될 때 클린업을 사용하고 싶으면 2번째 파라미터로 빈 배열 [] 을 넣으면 된다.
지금은 [movies]가 들어있으므로 update 되기 직전에 불려지는 것!

 

Intersection Observer의 entries?

MDN 참고

저번 과제에서 짝님은 [ {isIntersecting} ] 으로 풀어내셨고, 나는 다른 여러 글도 참고해서 좀더 미래의 내가 직관적으로 이해할 수 있는(😭) entries[0].isIntersecting 을 선택했다.

console.log 로 찍어본 entries

 

 

그리고 useCallback을 쓰는 이유?

• 함수 자체를 기억하고
• 렌더링 될 때 함수 자체가 재시작 돼도 함수가 새로 만들어지지 않는다
• 이전 state 값을 기억하고 있기 때문에 함수 안에서 사용하는 state 또는 props가 있다면 꼭 deps 배열에 포함해야 한다
• props가 바뀌지 않으면 Virtual Dom에 새로 렌더링 하는 것 조차 하지 않는다
• 자식 컴포넌트에 메서드를 전달할 때에는 useCallback으로 감싸서 전달할 때 마다 메서드가 새로 생성되지 않도록 해야 한다.

 

 

👀참고 (감사합니다)

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

Intersection Observer API - Web API | MDN

https://pks2974.medium.com/intersection-observer-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-fc24789799a3

Intersection Observer 간단 정리하기

 

https://yceffort.kr/2020/09/guide-to-usecallback

Home

 

https://velog.io/@lllen/useEffect

[react] useEffect / useMemo / useCallBack / React.memo

 

 

 

나중에 꼭 다시 보고 싶은

https://rinae.dev/posts/a-complete-guide-to-useeffect-ko#%EA%B7%B8%EB%9F%AC%EB%A9%B4-%ED%81%B4%EB%A6%B0%EC%97%85cleanup%EC%9D%80-%EB%AD%90%EC%A7%80

[번역] useEffect 완벽 가이드