[CODE] useResFetchCount [9/6 study]

useResFetchCount - 스크린 사이즈에 맞춰서 데이터를 다르게 불러와야해서 작성한 코드입니다

 

프로젝트 하면서 작성한 코드 기록하는 게시물입니다.

사용법

const fetchSize = useResFetchCount({ mobileSize: 4, tabletSize: 9, desktopSize: 8 });

import { useEffect, useState } from 'react';

interface FetchSizeOptions {
  desktopSize: number;
  mobileSize: number;
  tabletSize: number;
}

const useResFetchCount = ({ mobileSize, tabletSize, desktopSize }: FetchSizeOptions) => {
  const [fetchSize, setFetchSize] = useState<number>(9);

  useEffect(() => {
    const updateFetchSize = () => {
      if (window.innerWidth < 424) {
        setFetchSize(mobileSize);
      } else if (window.innerWidth < 768) {
        setFetchSize(tabletSize);
      } else {
        setFetchSize(desktopSize);
      }
    };

    updateFetchSize();
    window.addEventListener('resize', updateFetchSize);

    return () => {
      window.removeEventListener('resize', updateFetchSize);
    };
  }, [mobileSize, tabletSize, desktopSize]);

  return fetchSize;
};

export default useResFetchCount;