[TIL/React] 2024/07/12

export interface PaginationResponse<T> {
  contents: T[]; // 현재 페이지에 포함된 데이터 리스트
  pageNumber: number; // 현재 페이지 번호
  pageSize: number; // 페이지 크기
  totalPages: number; // 전체 페이지 수
  totalCount: number; // 전체 아이템 수
  isLastPage: boolean; // 마지막 페이지 여부
  isFirstPage: boolean; // 첫 페이지 여부
} 

// 0부터 1023까지의 숫자를 포함하는 배열을 생성하고 각 요소를 User 객체로 변환
const users = Array.from(Array(1024).keys()).map(
  (id): User => ({
    id,
    name: `denis${id}`,
  })
);

// 핸들러 배열에는 REST API의 엔드포인트와 그에 대한 응답을 정의하는 함수가 포함됨
const handlers = [
  // '/users' 경로에 대한 GET 요청을 처리하는 핸들러
  rest.get('/users', async (req, res, ctx) => {
    // 요청 URL에서 searchParams를 추출
    const { searchParams } = req.url;
    // 쿼리 파라미터에서 size와 page를 추출하여 숫자로 변환
    const size = Number(searchParams.get('size'));
    const page = Number(searchParams.get('page'));
    // 전체 유저 수
    const totalCount = users.length;
    // 전체 페이지 수를 계산 (전체 유저 수를 페이지 크기로 나눈 후 반올림)
    const totalPages = Math.round(totalCount / size);

    // 응답 생성 및 반환
    return res(
      // 응답 상태 코드를 200으로 설정 (성공)
      ctx.status(200),
      // JSON 형태로 응답을 생성
      ctx.json<PaginationResponse<User>>({
        // 요청된 페이지에 해당하는 유저 리스트를 slice 메서드를 사용해 가져옴
        contents: users.slice(page * size, (page + 1) * size),
        // 요청된 페이지 번호
        pageNumber: page,
        // 각 페이지의 크기 (유저 수)
        pageSize: size,
        // 전체 페이지 수
        totalPages,
        // 전체 유저 수
        totalCount,
        // 현재 페이지가 마지막 페이지인지 여부를 나타냄
        isLastPage: totalPages <= page,
        // 현재 페이지가 첫 페이지인지 여부를 나타냄
        isFirstPage: page === 0,
      }),
      // 응답을 500ms 지연시킴
      ctx.delay(500)
    );
  }),
];

// 페이지 크기를 계산, 카드 크기(CARD_SIZE)와 뷰포트 너비에 따라 동적으로 설정
const PAGE_SIZE = 10 * Math.ceil(visualViewport.width / CARD_SIZE);

function UsersPage() {
  // 페이지 상태를 관리하기 위한 useState 훅
  const [page, setPage] = useState(0);
  // 유저 데이터를 저장할 상태
  const [users, setUsers] = useState<User[]>([]);
  // 데이터 로딩 상태를 관리하기 위한 상태
  const [isFetching, setFetching] = useState(false);
  // 다음 페이지가 있는지 여부를 관리하기 위한 상태
  const [hasNextPage, setNextPage] = useState(true);

  // 유저 데이터를 비동기적으로 가져오는 함수
  const fetchUsers = useCallback(async () => {
    // axios를 사용하여 '/users' 경로에 GET 요청을 보냄, 쿼리 파라미터로 페이지와 크기를 전달
    const { data } = await axios.get<PaginationResponse<User>>('/users', {
      params: { page, size: PAGE_SIZE },
    });
    // 현재 유저 리스트에 새로운 데이터를 추가
    setUsers(users.concat(data.contents));
    // 다음 페이지 번호를 설정
    setPage(data.pageNumber + 1);
    // 다음 페이지가 있는지 여부를 설정
    setNextPage(!data.isLastPage);
    // 로딩 상태를 false로 설정
    setFetching(false);
  }, [page]);

  // 컴포넌트가 마운트될 때와 스크롤 이벤트를 처리하기 위한 useEffect 훅
  useEffect(() => {
    const handleScroll = () => {
      const { scrollTop, offsetHeight } = document.documentElement;
      // 스크롤이 페이지 하단에 도달했을 때 로딩 상태를 true로 설정
      if (window.innerHeight + scrollTop >= offsetHeight) {
        setFetching(true);
      }
    };
    // 초기 로딩 상태를 true로 설정
    setFetching(true);
    // 스크롤 이벤트 리스너 추가
    window.addEventListener('scroll', handleScroll);
    // 컴포넌트가 언마운트될 때 스크롤 이벤트 리스너 제거
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 로딩 상태가 변경될 때와 다음 페이지가 있을 때 유저 데이터를 가져오는 useEffect 훅
  useEffect(() => {
    // 로딩 상태가 true이고 다음 페이지가 있을 때 유저 데이터를 가져옴
    if (isFetching && hasNextPage) fetchUsers();
    // 다음 페이지가 없을 때 로딩 상태를 false로 설정
    else if (!hasNextPage) setFetching(false);
  }, [isFetching]);

  return (
    <Container>
      {/* 유저 데이터를 카드 형태로 렌더링 */}
      {users.map((user) => (
        <Card key={user.id} name={user.name} />
      ))}
      {/* 로딩 상태일 때 로딩 컴포넌트를 렌더링 */}
      {isFetching && <Loading />}
    </Container>
  );
}

useEffect(() => {
  const handleScroll = () => {
    const { scrollTop, offsetHeight } = document.documentElement
    if (window.innerHeight + scrollTop >= offsetHeight) {
      setFetching(true)
    }
  }

  setFetching(true)
  window.addEventListener('scroll', handleScroll)
  return () => window.removeEventListener('scroll', handleScroll)
}, [])

import React, { useState, useEffect, useRef, useCallback } from "react";
import axios from "axios";
import styled from "styled-components";

const AppContainer = styled.div`
  text-align: center;
  padding: 20px;
`;

const Title = styled.h1`
  margin-bottom: 20px;
`;

const CardContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
`;

const Card = styled.div`
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  width: 150px;
  text-align: left;
  transition: transform 0.3s;

  &:hover {
    transform: translateY(-10px);
    cursor: pointer;
  }
`;

const CardImage = styled.img`
  max-width: 100%;
  border-radius: 4px;
`;

const CardText = styled.p`
  margin: 10px 0 0;
  font-size: 14px;
`;

const LoadingText = styled.p`
  margin-top: 20px;
`;

const EndText = styled.p`
  margin-top: 20px;
  color: grey;
`;

const App = () => {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const observer = useRef();

  const fetchItems = async (page) => {
    setLoading(true);
    try {
      const response = await axios.get(
        `https://jsonplaceholder.typicode.com/photos?_page=${page}&_limit=10`
      );
      setItems((prevItems) => [...prevItems, ...response.data]);
      setHasMore(response.data.length > 0);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchItems(page);
  }, [page]);

  const lastItemRef = useCallback(
    (node) => {
      if (loading) return;
      if (observer.current) observer.current.disconnect();
      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          setPage((prevPage) => prevPage + 1);
        }
      });
      if (node) observer.current.observe(node);
    },
    [loading, hasMore]
  );

  return (
    <AppContainer>
      <Title>Infinite Scroll Cards</Title>
      <CardContainer>
        {items.map((item, index) => (
          <Card
            key={item.id}
            ref={items.length === index + 1 ? lastItemRef : null}
          >
            <CardImage src={item.thumbnailUrl} alt={item.title} />
            <CardText>{item.title}</CardText>
          </Card>
        ))}
      </CardContainer>
      {loading && <LoadingText>Loading...</LoadingText>}
      {!hasMore && <EndText>No more items to load</EndText>}
    </AppContainer>
  );
};

export default App;