Axios with Credentials and React Infinity scroll

오늘은 유용한 정보를 알게 되어서 기록할까 합니다.

 

먼저 axios는 통신시 파라미터 값이 undefiend라면 파라미터 자체를 제외하고 보낸다는 사실을 알게 되었습니다.

 

두 번째는 Axios withCredentials에 대해서 알게 되었는데 withCredentials는 Axios에서 사용되는 옵션 중 하나입니다. 

이 옵션은 HTTP 요청을 보낼 때 요청에 자격증명(credential)을 포함시키는지 여부를 결정합니다.

자격증명은 주로 쿠키와 같은 인증 정보를 포함하는 것을 의미합니다. 

일반적으로 브라우저에서는 동일 출처 정책(Same Origin Policy)에 따라 다른 도메인에 대한 요청에서는 쿠키를 자동으로 포함시키지 않습니다. 
하지만 withCredentials를 true로 설정하면 Axios는 요청에 쿠키와 같은 자격증명 정보를 포함시킵니다.

react-infinity scroll을 내일 사용할 것이기 때문에 이전에 경험한 기억을 떠올려서 예제 코드를 작성해 보았다.

 

import React, { useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

const ScrollTest = () => {
  const [items, setItems] = useState(
    Array.from({ length: 20 }, (_, index) => index)
  );

  const fetchMoreData = () => {
    setTimeout(() => {
      setItems((prevItems) =>
        prevItems.concat(
          Array.from({ length: 20 }, (_, index) => index + prevItems.length)
        )
      );
    }, 1500);
  };

  return (
    <div style={{ fontSize: "2.5rem" }}>
      <h1>Infinity Scroll Example</h1>
      <InfiniteScroll
        dataLength={items.length}
        next={fetchMoreData}
        hasMore={true}
        loader={<h4>Loading...</h4>}
      >
        {items.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </InfiniteScroll>
    </div>
  );
};

export default ScrollTest;

구현 사진

font-size를 키운 이유는 숫자가 작을 때는 body요소 바깥으로 나가질 않아서 스크롤이 생기지 않아 실행이 되지 않는다.

그렇기 때문에 이 개념만 알고 있으면 모든 곳에서 페이징 처리를 할 수 있을 것 같다.