3월 7일 여정 58일차이다.

오늘의 클론코딩때 적용했던 무한 스크롤에 대해 간단하게 코드 리뷰 하려고 한다.

오늘의 Today I Learned

     <div ref={ref}>
          {infinityLoading && <Loading />}
          <p>마지막 페이지 입니다.</p>
        </div>

스크롤의 마지막에 ref로 지정해주어야 한다.

`api/curriculum?page=${arg.page}&size=3&sortBy=createdAt`,

백엔드에서 API 주소를 설정하여 페이지를 원하는 만큼 fetch를 하게끔 해준다.

  const page = useRef(1);
  const [ref, inView] = useInView();

  useEffect(() => {
    dispatch(initInfinitiScroll());
    dispatch(__getInfinitiScroll({ page: page.current }));
    dispatch(myModal(false));
  }, []);

  useEffect(() => {
    if (inView) {
      page.current += 1;
      dispatch(__getInfinitiScroll({ page: page.current }));
    }
  }, [inView]);

useEffect를 사용하여 페이지의 끝에 도달 할때마다 page 개수를 1씩 증가시켜준다.

  name: "getInfinitiScroll",
  initialState,
  reducers: {
    initInfinitiScroll: (state, action) => {
      state.isLoading = false;
      state.error = false;
      state.data = [];
    },
  },
  extraReducers: (builder) => {
    builder.addCase(__getInfinitiScroll.pending, (state) => {
      state.isLoading = true;
      state.error = null;
    });
    builder.addCase(__getInfinitiScroll.fulfilled, (state, action) => {
      state.isLoading = false;
      state.error = null;
      state.data = [...state.data].concat(action.payload);
    });
    builder.addCase(__getInfinitiScroll.rejected, (state, action) => {
      state.isLoading = false;
      state.error = action.payload;
    });
  },
});

export const { initInfinitiScroll } = getInfinitiScroll.actions;
export default getInfinitiScroll;

리덕스 thunk로 받아올때, reducer로 따로 초기화 시키지않으면 데이터가 다 불러와졌음에도 불구하고 이전 페이지의 데이터가 계속 불러와 누적된다.

마지막으로

무한스크롤 생각보다 어렵다...