프론트엔드 개발자가 되기위한 여정 -14

이정우·2022년 9월 19일

개발자 부트캠프 주니어 코드캠프 프론트엔드

frontend-bootcamp

목록 보기

14/60

----14일차---

밸~하!
밸로그 여러분 안녕하세요
오늘은 pagination을 알아보고 무한스크롤과 페이지 네이션의 차이를 알아보고! lifting-State-UP에 대해서 알아보도록 하겠습니다!
그럼 출발~

1.다른 페이지도 보고싶어(pagination)

첫번째로!
페이지 네이션을 보겠습니다!

페이지네이션은 크게 2개로 나뉘어 지는데

페이지를 나누는 방식과 아래에 지속적으로 새로운 창을 보여주는 방식이 있습니다 !
쉽게말해서 무한스크롤이라고도 하는데요!

오늘은 페이지네이션중 클릭후 페이지를 넘어가는 방식에 대해서 알아보겠습니다!

하단부분에 페이지를 받을 부분을 만들어 줘야합니다!
span태그와 같은 인라인 요소의 태그로 숫자를 1,2,3,4....이렇게 작성을 해서 이부분을 통해서 페이지를 옮길수 있게 만들어주셔야겠죠??

<span>1</span>
<span>2</span>
<span>3</span>

이렇게요!

그리고 함수를 만들어 넣어줘서 실행될수있게 만들어줘야겠죠??

const onClickPage=(event)=>{
event.target.id
}

return(
<>
<span onClick={onClickPage}>1</span>
<span onClick={onClickPage}>2</span>
<span onClick={onClickPage}>3</span>
</>
)

이렇게요!

이렇게 하면 span태그를 클릭하게 되면 id값을 가져와 페이지를 이동할수 있겠죠??

2. 무한스크롤( Infinite Scroll)

이번 주제는 무한스크롤 입니다!

앞서 설명드렸던 페이지네이션과는 무슨차이가 있을까요??

먼저 무한스크롤이 무엇이고 어떻게 동작하는지 알아볼수있도록 하겠습니다 !

무한스크롤은 페이지네이션과는 다르게 페이지를 만드는것이 아니라
말 그대로 새로운 컨텐츠들을 스크롤을 내릴때마다 계속 불러와 주는것 입니다!
흔히 볼 수 있는곳이 번개장터라던지 아니면 많은 컨텐츠들을 보여줘야 하는 곳들에서 자주 쓰입니다 !

무한스크롤을 자세히 설명하기 이전에 약간의 사전 지식이 필요한데요
바로 배열을 합치는 것입니다
무슨소리냐고요??

이전의 페이지 네이션에서는 10개를 보여주고 나머지는 자른이후 다음페이지에 보여주시면 되지만
무한스크롤의 경우에는 이전의 컨텐츠에 새로운 컨텐츠를 붙여줘야하기때문에 배열과 객체를 합치는 방법들이 필요합니다

먼저 그럼 예시를 봐볼까요??

const aaa =["철수","맹구"]
const bbb=["짱구","훈이"]
cosnt ccc=[...aaa,...bbb]
console.log(ccc)
//["철수","맹구","짱구","훈이"]

이렇게 알 수 있겠죠??
(...은 spread연산자를 의미합니다 ! 다음포스팅(15)에 설명되어 있어요!)

이렇게 spread연산자를 통해서 무한스크롤을 해보면 되겠죠?
어떻게요??
저희가 이전에 통신을 했을떄 사용하던 apolloclient에서 지원을 하고 있습니다
바로

fetchMore({
	variables:{page:4},
    updateQuery:(prev,{fetchMoreResult})=>{
    	return{
        fetchBoardComments:[...prev.fetchBoardComments,...fetchMoreResult?.fetchBoardComments],
    	};
    },
});

이런식으로 fetchMore를 사용해서 할 수있게됩니다!
무슨말이냐
위에것은 댓글창에서 무한스크롤을 사용할때 사용하는 방법입니다
return뒤에서
전체댓글에 이전댓글들을 spread연산자로 가져오고 추가 댓글들을 spread연산자로 가져와
서로 더해서 넣어주는 겁니다!
식이 길고 변수명과 함수명들이 길어서 그렇지만은 실제로 보면
처음에 했던 배열의 합치기와는 다를게 없죠??