7/24TIL

1. React 컴포넌트에서 현재 페이지 표시하기

• 오늘은 사용자가 현재 페이지와 총 페이지 수를 쉽게 확인할 수 있는 기능을 React 컴포넌트에 추가하는 방법에 대해 배웠습니다. 이러한 기능은 사용자가 웹 애플리케이션 내에서 자신의 위치를 명확히 인식하게 해주어, 더 나은 사용자 경험을 제공합니다.
• 방법:
  • 먼저, 현재 페이지를 나타내는 변수(currentPage)와 필터링된 아이템 수를 기반으로 총 페이지 수(totalPages)를 계산하는 방식에 대해 이해했습니다. 이를 위해, 검색어와 일치하는 항목의 개수를 세고, 이를 페이지당 아이템 수(itemsPerPage)로 나누어 올림 처리하여 총 페이지 수를 구합니다.
  • 이렇게 계산된 총 페이지 수를 화면에 표시함으로써 사용자는 현재 위치를 쉽게 알 수 있도록 합니다. 이는 특히 긴 목록을 탐색할 때 유용하며, 사용자에게 더 나은 인터페이스를 제공합니다.

const totalFilteredItems = allItems.filter(
  (item) =>
    item.itemName.toLowerCase().includes(searchTerm.toLowerCase()) ||
    item.effect.toLowerCase().includes(searchTerm.toLowerCase())
).length;
const totalPages = Math.ceil(totalFilteredItems / itemsPerPage);

2. API에서 전체 데이터 수신 문제

• 다음으로, API에서 제공하는 데이터의 양과 관련된 문제를 다루었습니다. API는 약 48,000개의 데이터를 제공하고 있지만, 한 번의 요청으로 최대 100개만 가져올 수 있는 제약이 있었습니다. 이는 대량의 데이터를 처리해야 할 때 상당한 불편을 초래할 수 있습니다.
• 해결 방법: 이 문제를 해결하기 위해 페이지네이션을 구현하여 여러 번에 걸쳐 데이터를 요청하는 방법을 사용했습니다. API가 페이지네이션을 지원하는 경우, pageNo라는 파라미터를 사용하여 각 페이지에 대한 요청을 나누어 처리함으로써 필요한 데이터를 효율적으로 가져올 수 있게 되었습니다.

const fetchData = async (pageNo: number) => {
  const response = await fetch(`/api/search?pageNo=${pageNo}&numOfRows=100`);
  // 데이터 처리...
};

• 또한, 전체 아이템 수(totalItems)를 설정하고 이 값을 바탕으로 총 페이지 수를 다시 계산하여 사용자에게 알리는 과정을 추가했습니다. 이를 통해 사용자는 전체 데이터 양과 현재 페이지를 보다 명확하게 이해할 수 있습니다.

const totalPages = Math.ceil(totalItems / itemsPerPage);

코드 예시

• 마지막으로, 사용자가 검색어를 입력하고 페이지를 전환할 수 있는 기능을 포함한 코드 예시를 통해 페이지네이션과 현재 페이지 표시가 잘 작동하도록 구현하는 방법을 살펴보았습니다. 이는 실제 애플리케이션에서 사용자와의 상호작용을 보다 매끄럽게 만들어 줍니다.

// 전체 데이터 저장 및 페이지네이션 구현
const [allItems, setAllItems] = useState<Item[]>([]);
const [currentPage, setCurrentPage] = useState<number>(1);
const itemsPerPage = 20;

// 페이지 전환 버튼과 현재 페이지 표시
<button onClick={handlePreviousPage} disabled={currentPage === 1}>이전 페이지</button>
<button onClick={handleNextPage} disabled={currentPage === totalPages}>다음 페이지</button>
<p>현재 페이지: {currentPage} / 총 페이지: {totalPages}</p>

결론

• 오늘 학습한 내용을 통해 React에서 페이지네이션을 구현함으로써 사용자 경험을 개선할 수 있는 방법을 알게 되었으며, API에서 데이터를 효율적으로 관리하는 방법도 배웠습니다.