Intersection Observer API 이용하여 무한스크롤 구현하기

Intersection Observer API를 이용하여 무한스크롤을 구현하고자 한다.

 

<데이터 구조>

사용하는 영화 리스트 API 의 데이터 구조는 page 한개 당 20개의 영화 리스트를 담은 배열 형태로 되어있다.

따라서, 한번에 20개의 영화 리스트를 받을 수 있고 그 다음 20개의 영화 리스트를 요청하기 위해서는 fetch 요청 URL에서 page=2 라는 파라미터를 추가해주어야 한다. 

 

<로직>

이러한 데이터 구조를 보았을 때, 무한스크롤을 구현하기 위해서는

 

1. Intersection Observer가 맨 아래 요소를 관측함 

2. 관측이 확인되면 page 라는 상태 값을 1 증가시킴 

3. 의존성 배열로 page 값을 갖는 useEffect 훅을 작성함

 -> 해당 훅에서 page 값의 업데이트가 감지되었을 때, 해당 page 값을 URL 파라미터로 받아 fetch 요청을 보냄

4. 받아온 데이터를 렌더링함

 

이러한 로직이 필요하겠다는 생각을 했다. 

 

 

~~~ 작성 중 ~~~