6 . 🎉 Intersection Observer + React 무한스크롤 구현

Eunsu·2021년 12월 30일

@ React

목록 보기

6/11

모르는건 배우고 배웠으면 써봐야 뭐가 뭔지 암..
그래서 어제 포스팅한 Intersection Observer 를 사용해 무한 스크롤을 구현해 보기로 함.

이분강의를 듣고 내용을 바탕으로 포스팅했음. (이미지 클릭 시 유튜브 이동함.)

🚀 Intersection Observer Infinite Scrolling

1. Unsplash API 설정

unsplash에서 제공하는 무료 API사용함. 회원가입 하면 무료로 API 받을 수 있음!

https://unsplash.com/developers

회원가입하고 로그인해서 노란부분을 클릭하면

요렇게 API 키를 받을 수 있음

Documentation에 노란부분을 클릭하면 API사용 방법을 알 수 있음. 그외 API 메서드 들도 사용 할 수 있는데

페이지와 몇개의 페이지를 보여주는지 컨트롤 하는 메서드를 사용해 10개만 보여줄 꺼임.

2. 컴포넌트 구성

◾ CSS / component 구성

public

src
- index.js
- styles.css
- App.js
- PhotoItem.js

CSS 카피함. 이 분 github은 유튜브 사이트에 있음.

3. 데이터 패칭

◾ App.js

import axios from "axios";
import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
  const [photos, setPhotos] = useState([]);
  //데이터 계속해서 담을 state
  const [pageNumber, setPageNumber] = useState(1);
  //스크롤이 닿았을 때 2=>3=>4 새롭게 데이터페이지를 바꿀 state
  const [loading, setLoading] = useState(false);
  //로딩 성공, 실패 담을 state
  const fetchPhotos = async () => {
    const API_KEY = "mEbcH0pSm70nidrKQS43hkgPtYQeFj1GI1txLml1tmk";
     await axios
      .get(
        `https://api.unsplash.com/photos/?client_id=${API_KEY}&page=${pageNumber}&per_page=10`
      )
      .then((res) => setPhotos([...photos, ...res.data]))
      //데이터를 처음부터 보여줘야 하기 때문에, operator 연산자로 복제해서 축적시킴.
      .then(() => setLoading(true))
  };
  console.log(photos);
  useEffect(() => fetchPhotos(), [pageNumber]);
  //페이지 넘버가 바뀔때마다 데이터를 불러와야 하니까 배열 값으로 pageNumber를 넣음.
  return (
    <div className="App">
      <h1>Infinite Scrolling</h1>
      <button>Load More</button>
    </div>
  );
}

10개의 데이터가 예쁘게 잘 담겨있음.

4. photos 배열 데이터 mapping

//App.js
{...생략}
    <div className="App">
      <h1>Infinite Scrolling</h1>
      {
        photos.map((photo,index) => <PhotoItem key={index} photo={photo}  />)
      }
      <button>Load More</button>
    </div>

//PhotoItem.js
export default function PhotoItem({ photo }) {
  return (
    <div className="photos">
      <img src={photo.urls.small} />
      <p>Photo By : {photo.user.username}</p>
    </div>
  );
}

5. pageNumber 바꾸는 함수 만들기

1-10 에서 데이터를 불러왔다면, pageNumber를 1씩 늘려서 11- 20 데이터를 불러옴. page api method를 2로 바꿔서 가능해짐.
그리고 새롭게 불러온 데이터는 fetchPhotos를 타고 기존에 있던 데이터에 더해지게 됨.
LoadMore 함수를 만들어 pageNumber를 1씩 더하는 함수 만듬.

//App.js
const loadMore= () => setPageNumber(prev => prev+1);
// setState는 parameter로 state로 받음.


## 6. Target 설정

무한 스크롤의 이론은 기본적으로 마지막 엘리먼트에 닿았을 때, 데이터를 자동으로 불러오는 것이다. 내가 만든 페이지에서 마지막 엘리먼트는 `LoadMore`버튼이므로, 이 버튼에 ref 를 지정해놓고 탐색 타겟으로 정하면, 
**이 엘리먼트에 도달했을 때 뭔가를 할 수 있다. (데이터 패칭)**

### ▪ ref 지정
> ```javascript
import {useRef } from "react";
const target= useRef();
{...생략}
<button ref={target}>Load More</button>

7. Intersection Observer 사용해서 뷰포트 안에있는 엘리먼트 교차 확인하기

◾ Observer 등록

//App.js
{...생략}
useEffect(() => {
	if(loading){
    //로딩되었을 때만 실행
    	const observer= new IntersectionObserver((entries) => {
        	console.log(entries[0])
        })
        //옵져버 탐색 시작
        observer.observe(target.current);
    }
},[])
{...생략}

viewport 해당 내에서 스크롤을 할때 옵져버가 실행되면서 콘솔이 찍힘.

스크롤이 target에 도달하기 전 : isIntersection:false
스크롤이 target에 도달한 후 : isIntersection:true

//App.js
  useEffect(() => {
    if (loading) {
      const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
          loadMore();
          //버튼에 도달했을 때 pageNumber를 1씩 증가시켜 데이터를 10개씩 더 보여줌.
        }
      });
      observer.observe(target.current);
    }
  }, []);

8. 페이지 수 제한하기

60 개이상의 콘텐츠를 보이지 않게 하고싶음. 그러면 6번 이상 데이터를 불러오면 안됨.

//App.js
{...생략}
  let num = 1; //변수 지정
  useEffect(() => {
    if (loading) {
      const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
          num++; //변수 증가시킴
          loadMore();
          if (num >= 6) {
          	//6이상이거나 같으면 탐색중지
            observer.unobserve(target.current);
          }
        }
      });
      observer.observe(target.current);
    }
  }, []);
  {...생략}