접근 가능한 구성 요소: 페이지 매김

오늘은 처음부터 페이지 매김을 생성하고 액세스 및 재사용이 가능하도록 만드는 방법을 살펴보겠습니다. 도움이 되셨기를 바라며 포스팅 마지막에 댓글을 남겨주세요!

Github: https://github.com/micaavigliano/accessible-pagination
프로젝트: https://accessible-pagination.vercel.app/

데이터를 가져오는 사용자 정의 후크

const useFetch = <T,>(url: string, currentPage: number = 0, pageSize: number = 20) => {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<boolean>(false);

  useEffect(() => {
    const fetchData = async() => {
      setLoading(true);
      setError(false);

      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('network response failed')
        }
        const result: T = await response.json() as T;
        setData(result)
      } catch (error) {
        setError(true)
      } finally {
        setLoading(false);
      }
    };

    fetchData()
  }, [url, currentPage, pageSize]);

  return {
    data,
    loading,
    error,
  }
};

1. 일반 유형을 사용하여 사용자 정의 후크를 생성해 보겠습니다. 이를 통해 이 후크를 사용할 때 예상되는 데이터 유형을 지정할 수 있습니다
2. 3개의 매개변수를 기다려 보겠습니다. 하나는 데이터를 가져올 url, currentPage는 우리가 있는 페이지이고 기본적으로 0이고 pageSize는 숫자입니다. 페이지당 포함할 항목 수는 기본적으로 20개입니다(이 값은 변경할 수 있음).
3. 상태에서 const [data, setData] = useState(널); 일반 유형 T를 전달합니다. 다양한 데이터 요청에 사용할 때 다양한 유형의 데이터가 예상되기 때문입니다.

쪽수 매기기

페이지에 액세스하려면 다음 사항을 고려해야 합니다.

• 포커스는 페이지의 모든 대화형 요소를 통해 이동해야 하며 시각적 표시기가 있어야 합니다
• 스크린 리더와의 원활한 상호 작용을 보장하려면 지역, 속성 및 상태를 올바르게 사용해야 합니다
• 페이지는 태그 내에서 그룹화되어야 하며 페이지 자체를 페이지로 식별하는 aria-label을 포함해야 합니다.
• 페이지 매김 내의 각 항목에는 aria-setsize 및 aria-pointset가 포함되어야 합니다. 자, 그것들은 무엇을 위한 것인가요? aria-setsize는 페이지 매김 목록 내의 총 항목 수를 계산하는 데 사용됩니다. 스크린 리더에서는 다음과 같이 알려줍니다.

aria-pointset은 페이지의 모든 항목 내에서 항목의 위치를 ​​계산하는 데 사용됩니다. 스크린 리더에서는 다음과 같이 알려줍니다.

• 각 항목에는 해당 버튼을 클릭하면 이동할 페이지를 식별할 수 있는 aria 라벨이 있어야 합니다.
• 다음/이전 요소로 이동하는 버튼이 있고 각 버튼에는 해당하는 아리아 라벨이 있어야 합니다
• 페이지 매김에 줄임표가 포함된 경우 아리아 라벨로 올바르게 표시해야 합니다.
• 새 페이지로 이동할 때마다 스크린 리더는 현재 어느 페이지에 있는지, 새 항목이 몇 개 있는지 다음과 같이 알려주어야 합니다.

이를 달성하기 위해 다음과 같이 코딩하겠습니다.

const useFetch = <T,>(url: string, currentPage: number = 0, pageSize: number = 20) => {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<boolean>(false);

  useEffect(() => {
    const fetchData = async() => {
      setLoading(true);
      setError(false);

      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('network response failed')
        }
        const result: T = await response.json() as T;
        setData(result)
      } catch (error) {
        setError(true)
      } finally {
        setLoading(false);
      }
    };

    fetchData()
  }, [url, currentPage, pageSize]);

  return {
    data,
    loading,
    error,
  }
};

페이지 로드가 중지되면 현재 페이지와 로드 중인 새 배열의 길이를 사용하여 새 메시지를 설정합니다.

이제 그렇습니다! pagination.tsx

파일에서 코드가 어떻게 구성되어 있는지 살펴보겠습니다.

구성요소에는 5개의 소품이 필요합니다

const [statusMessage, setStatusMessage] = useState<string>("");

useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    if (!loading) {
      setStatusMessage(`Page ${currentPage} loaded. Displaying ${data?.near_earth_objects.length || 0} items.`);
    }
  }, [currentPage, loading]);

• currentPage는 현재 페이지를 참조합니다. 우리는 다음과 같이 페이지 매김을 사용하려는 구성 요소에 위치하여 이를 처리할 것입니다: const [currentPage, setCurrentPage] = useState(1);
• totalPages는 API
에 포함되어 표시될 총 항목 수를 나타냅니다.
• nextPage 이 함수를 사용하면 다음 페이지로 이동하여 현재 페이지 상태를 다음과 같이 업데이트할 수 있습니다.

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  nextPage: () => void;
  prevPage: () => void;
  goToPage: (page: number) => void;
}

• prevPage 이 함수를 사용하면 현재 페이지 이전 페이지로 이동하여 현재 페이지 상태를 업데이트할 수 있습니다.

const handlePageChange = (newPage: number) => {
    setCurrentPage(newPage); 
  };

  const nextPage = () => {
    if (currentPage < totalPages) {
      handlePageChange(currentPage + 1);
    }
  };

• goToPage 이 함수에는 숫자 매개변수가 필요하며 각 항목이 원하는 페이지로 이동할 수 있도록 하는 함수입니다. 다음과 같이 작동하도록 해보자:

const prevPage = () => {
    if (currentPage > 1) {
      handlePageChange(currentPage - 1);
    }
  };

페이지 매김을 구현하려면 목록에서 반복할 배열을 만드는 한 단계가 더 필요합니다! 이를 위해서는 다음 단계를 따라야 합니다.

1. 함수를 만듭니다. 이 경우에는 getPageNumbers라고 하겠습니다.
2. 목록의 첫 번째 항목과 마지막 항목에 대한 변수를 만듭니다.
3. 왼쪽에 줄임표에 대한 변수를 만듭니다. 내 결정에 따라 줄임표는 목록의 네 번째 요소 뒤에 위치하게 됩니다.
4. 오른쪽에 줄임표에 대한 변수를 만듭니다. 내 결정에 따라 내 줄임표는 목록의 세 항목 앞에 배치됩니다.
5. 현재 페이지, 이전 항목 2개, 후속 항목 2개 등 5개 항목이 항상 중앙에 배치되는 배열을 반환하는 함수를 만듭니다. 필요한 경우 첫 번째 페이지와 마지막 페이지를 제외합니다. const PagesAroundCurrent = [currentPage - 2, currentPage - 1, currentPage, currentPage 1, currentPage 2].filter(page => 페이지 > firstPage && 페이지 < lastPage);
6. 마지막 변수로는 이전에 생성된 모든 변수를 포함하는 배열을 생성하겠습니다.
7. 마지막으로 null 요소를 필터링하고 배열을 반환하겠습니다.

이 배열은 다음과 같이 페이지의 항목 목록을 얻기 위해 수행할 배열입니다.

const useFetch = <T,>(url: string, currentPage: number = 0, pageSize: number = 20) => {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<boolean>(false);

  useEffect(() => {
    const fetchData = async() => {
      setLoading(true);
      setError(false);

      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('network response failed')
        }
        const result: T = await response.json() as T;
        setData(result)
      } catch (error) {
        setError(true)
      } finally {
        setLoading(false);
      }
    };

    fetchData()
  }, [url, currentPage, pageSize]);

  return {
    data,
    loading,
    error,
  }
};

재사용 가능하고 접근 가능한 페이지 매김을 만드는 방법은 다음과 같습니다! 개인적으로 페이지를 만드는 방법을 라이브 코딩으로 구현해야 했기 때문에 처음부터 배웠습니다. 제 경험이 귀하의 경력에 ​​도움이 되고 구현하고 개선할 수도 있기를 바랍니다!

안녕하세요
운모<3

위 내용은 접근 가능한 구성 요소: 페이지 매김의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!