[항해99] Day55. TIL – 리액트 무한 스크롤 ( w. redux & react-infinite-scroll-component )

 

👩🏻‍💻 Today I Learned 📚

 

 

⭐들어가며

실전 프로젝트에 들어가는 기능과 디자인을 살펴보다가 당연하게 무한 스크롤을 써야한다는 의견이 나왔다. 강의를 보며 구현해본 적도 있고 이전 미니 프로젝트를 하면서 구현을 직접 해보지는 않았지만 코드를 함께 봤던 적이 있었다. 하지만 본 것과 직접 구현하는 것은 천지 차이라는 점.
메인 페이지 게시글을 조회하는 부분에서 필요한 기능인데 내가 맡게 된 페이지는 아니지만 무한 스크롤을 구현해보고 싶어서 따로 구현했다.

 

⭐ react-infinite-scroll-component

리액트에서 무한 스크롤을 구현할 수 있는 방법이 몇 가지가 있는데,

1) 브라우저의 onScroll을 이용해서 scrollHeight 값을 사용하는 거다.
2) Intersection Observer API 을 이용하는 방법이 대중적인것 같다. 스크롤 이벤트를 쓰면 짧은 시간에 많은 수의 호출을 할 수 있고, 동기적으로 실행되기 대문에 이벤트가 끊임없이 호출된다는 점이 있다. 이부분을 해결하기 위해서 스크롤 이벤트를 핸들링 할 수 있는 intersection observer API를 쓴다고 한다. 타겟 값을 계속 주시하면서 그 값이 뷰포트와 타겟요소가 들어왔을 때 실행할 함수를 등록해서 사용한다.

이번에 구현 할 때 쓴 방법은 react-infinite-scroll-component 라는 라이브러리를 쓴거였다.

react-infinite-scroll-component github

어떻게 사용하는지는 공식 깃헙에 들어가면 친절하게 나와있다. 다양한 속성들이 있기 때문에 필요한 것 들을 넣어서 구현하면 된다.

⭐ 문제점 발견 – Redux로 해결

이미지를 5개씩 받아오는 것으로 해서 잘 구현이 되었다. 그 동안 강의를 보며 무한 스크롤을 구현할 때 이해가 잘 안되고 어렵게만 느껴졌는데 라이브러리를 사용해서 구현하니 정말 힘 안 들이고 쉽게 구현한 느낌이였지만 문제점이 발견되었다.
내가 만드는 프로젝트는 한참 게시물을 조회하다가 딴 페이지에 갔다가 다시 돌아오면 내가 보던 페이지가 되어야하는데, 현재 구현된 코드는 뒤로가기를 눌러서 돌아가면 다시 첫 페이지부터 로딩이 되는 것이 아닌가?
이 문제를 해결하기 위해서 redux를 사용했다. 이 부분이 정말 까다롭게 느껴졌다.

 

 

main.js

import React, { useState, useEffect } from "react";
import { history } from "./redux/configStore";
import { useDispatch, useSelector } from "react-redux";
import { actionCreators as postActions } from "./redux/modules/post";
import InfiniteScroll from "react-infinite-scroll-component";
import axios from "axios";

const Main = () => {
  const dispatch = useDispatch();
  const post_data = useSelector((state) => state.post);
  const [hasMore, sethasMore] = useState(true);
  const [page, setpage] = useState(post_data.page);

  useEffect(() => {
    //첫 로딩시 불러오는 데이터
    dispatch(postActions.getPostAction(page));
  }, [page]);

  //scroll event
  //스크롤시 다음페이지를 보여주는 것
  const getData = () => {
 
    let pages = page + 1;
    axios
      .get(`https://picsum.photos/v2/list?page=${pages}&limit=5`)
      .then((res) => {
       
        //데이터가 사이즈보다 작을 경우
        if (data.length === 0 || data.length < 5) {
          sethasMore(false);
        
        } else {
          //데이터가 사이즈만큼 넘어왔을 때
      
          setpage(pages + 1);
        }
      });
  };
  return (
    <>
      {/* 다른 페이지로 넘어갔다가 다시 돌아왔을 때 페이지가 페이지가 그대로인지 확인하기 위한 버튼 */}
      <button onClick={() => history.push("/page")}>
        Move to another page
      </button>
      <InfiniteScroll
        dataLength={post_data.posts.length} //This is important field to render the next data
        next={getData}
        hasMore={hasMore}
      >
        {post_data.posts.map((item, idx) => {
          return (
            <>
              <div className="imgbox" key={item.id}>
                <img src={item.download_url} alt="photo" />
              </div>
            </>
          );
        })}
      </InfiniteScroll>
    </>
  );
};

export default Main;

 

이미지 스크롤이 일어나는 페이지이다. 다른 페이지로 이동했다가 돌아왔을 때를 확인하기 위해서 버튼을 위에 하나 넣어줬다.

원래 useEffect 부분에 첫 로딩시 들어오는 페이지를 1로 표시해서 넣어두고, getData()을 infinite Scroll 속성 중에 next에 넣어서 다음 페이지를 받습니다. next라는 속성은 바닥에 닿은 후에 데이터를 fetch해서 가져오는데 이때 이전 데이터도 포함되서 넘어온다.
useEffect에 들어간 부분이 첫 로딩시에 1로 되어있으니 계속해서 첫 페이지부터 로딩이 되는거다. 그래서 리덕스를 사용해서 랜딩시 받아온 리스트를 저장해두고 useSelector를 사용해서 리스트를 가져와서 사용했다.

 

 

 

 

post.js

import { createAction, handleActions } from "redux-actions";
import { produce } from "immer";
import axios from "axios";

const GET_POST = "GET_POST";

const initialState = {
  posts: [],
  page: 0,
  has_next: false,
};

const getPosts = createAction(GET_POST, (post_data) => ({ post_data }));

// middlewares
const getPostAction = (page) => {
  return async (dispatch, getState, { history }) => {
    axios
      .get(`https://picsum.photos/v2/list?page=${page}&limit=5`)
      .then((res) => {
        let is_next = null;
        if (res.data.length < 5) {
          is_next = false;
        } else {
          is_next = true;
        }
        let post_data = {
          posts: res.data,
          page: page + 1,
          next: is_next,
        };
        dispatch(getPosts(post_data));
      });
  };
};

// reducer
export default handleActions(
  {
    [GET_POST]: (state, action) =>
      produce(state, (draft) => {
        draft.posts.push(...action.payload.post_data.posts);
        draft.has_next = action.payload.post_data.next;
        draft.page = action.payload.post_data.page;
      }),
  },
  initialState
);

const actionCreators = {
  getPostAction,
};

export { actionCreators };

dispatch로 리덕스 함수를 쓸 때 page 값을 넘겨줘야한다. 그리고 받아오는 값에 페이지와 리스트, 그 다음 페이지로 넘어가도 되는지에 대한 정보가 담겨있다. 그러지 않으면 다음 페이지가 로딩되지 않는다. getData로는 페이지 값만 변경해주고 따로 리스트를 받아오지는 않았다. 리덕스에서 받은 내용으로도 스크롤이 반응한다. 그리고 main.js에서는 page가 변할 때마다 랜딩이 되게 의존값을 넣어준다.

처음에는 이해를 못해서 redux에 저장한 데이터를 가져와서 쓰는데, 무한 스크롤 동작을 위해서 계속해서 또 데이터를 받아오고 그걸 또 useState로 관리를 해주고 있었다. 사실 그럴 필요가 없는거 였는데 말이다. 스스로 코드를 보면서 이게 작동이 왜 되는건지를 이해를 못 했다. 왜냐면 리덕스는 리덕스대로 움직이고, 스크롤 데이터는 또 스크롤 데이터대로 움직이고 …둘이 따로놀고 있는데…뭐지?뭐지라며 😳

두번째 문제점! infinite Scroll에 속성으로 넣어주는 getData에 page값이 useEffect에 들어가는 page값이 동일하면 그 동일한 값의 페이지가 두번 불러와진다. 첫번째 페이지가 두 번 나오고 그다음 페이지가 나오는 것이다. 이 부분도 이해를 못 했다. 왜냐면 리덕스로 데이터 받는거랑 스크롤로 받는 값을 따로 움직이니깐, 왜지? 라는 생각이 들었기 때문. 따로 불러오는 데이터를 상태관리 안해는주는데 무슨 상관이지 했는데,…
getData에 들어가는 현재 page값에 + 1을 해서 그 다음 페이지부터 나오게했다. 이게 왜냐면 next속성에 들어가는 함수는 그 이전의 데이터도 소환해서 오기 때문에 아마도 현재 page값이 이전꺼로 넘어가는 듯 했다. 그래서 같은 페이지가 반복해서 나오는 것!

 

 

⭐ 완성

 

 

 

 

 

⭐ 참고한 동영상 & 블로그

• Blog

https://velog.io/@euneun/%EC%A1%B8%EC%97%85%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-k162xd7y

https://slog.website/post/8

• Youtube
  https://youtu.be/bBUOMy6Tugw