접근 가능한 구성 요소: 페이지 매김-JS 튜토리얼-php.cn

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

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,
  }
};

로그인 후 복사

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

쪽수 매기기

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

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

Componentes accesibles: Paginación

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

Componentes accesibles: Paginación

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

Componentes accesibles: Paginación

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

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);
    }
  };

로그인 후 복사

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

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