TIL - 2

UihyunLee·2022년 5월 30일
0

TIL

목록 보기
3/3

페이지네이션

서버에서 많은 데이터가 존재하고 이 데이터들을 전체적으로 보여줄 때
프론트에서는 한 페이지 안에서 많은 데이터를 받아와서 한번에 보여주는 것은 많은 시간이 소모되어 좋지 않을 뿐더러 UX에도 좋지 않다

따라서 인피니티 스크롤 or 페이지네이션을 이용해서 많은 데이터들을 관리하곤 한다

오늘 공부한 내용은 페이지네이션이다.

	...
    const [currentPage,setCurrentPage] = useState(1);
	const [limit,setLimit] = useState(10);
	const [data,setData] = useState(null);
	const {dataList} = useSelector((state)=>state.data);
    useEffect(()=>{
    	async function getData(){
			const res = await axios.get('...');
        	setData(res.data);
        }
		getData();	
    },[]);
	const last = currentPage*limit;
	const first = last - limit;
	function getCurrentData(arr){
    	let answer = null;
      	answer = arr.slice(first,last);
      	return answer;
    }
	return (
    	<Posts data = {getCurrentData(dataList)}></Post>
		//...페이지네이션을 해줄 버튼들 (props)로 받아서.
    )

이런 형식이다.
하지만 이렇게는 실무에서는 하지 않을 것이다. 데이터를 한번에 받아오기 때문에 정말 느려지기 때문이다.

따라서 하는 형식만 알고 이론을 정리하려 한다.

페이지에서 버튼을 클릭하면 action이 dispatch 되어서 페이지 번호와 limit을 서버로 전송하고 받아온 데이터들을 전역상태 혹은 state로 받아와서 페이지를 구성한다. 이것이 가장 간단한 방법이라고 한다.

커서와 리밋 방식으로 페이지 번호의 첫번째 목록의 id를 사용하는 방법이 있는데 이는 조금 더 공부하고 기록을 해보겠다.

profile
공부 기록

0개의 댓글