NotifyPage에 관하여(근데 이제 페이지네이션을 곁들인...) 🟢
1) 전체적인 페이지 구조를 설명하고, 2) pagination의 주요 로직을 정리하도록 하겠다.
페이지 구조 🟢
좌측 NotifyPage는 1) background-color와 padding을 조절하는 가장 큰 div와, 2) ComponentWrapper로 감싸진 card div, 3) 마지막으로 Pagination 컴포넌트로 구성된다.
1) 가장 큰 div
페이지 '전체'에 적용되는 background color를 담당한다. 따라서 ComponentWrapper보다 더 상위의 div에 해당 코드를 작성했다. 하위 코드(=ComponentWrapper)에서 width를 1200px로 한정하기에, 해당 div에서는 위 아래 영역의 padding을 추가적으로 적용하는 것으로 마무리 했다.
2) card div
ComponentWrapper는 width를 1200px로 제한하는 '공용 wrapper'다. 따라서 카드가 넘어가고 정렬되는 등의 부수적인 로직은, 하위 div에서 담당하도록 인라인으로 스타일을 주었다. 이미지와 타이틀, 그리고 세부적인 내용을 카드 내부에서 보여준다.
미리 세팅해놓은 데이터가 나타날 뿐이다. 다만, 카드 내부의 내용들은 children에 의해 기본 카드 세팅을 기준으로 렌더링 된다. 한마디로, 어떠한 데이터를 추가하든 간에 우측의 코드 형태(=카드 형태)를 기준으로 카드가 만들어진다는 뜻이다.
그런데 mapping의 대상이 currentCards인데 무슨 헛소리임? -> pagination 로직과 함께 설명하는 것이 더 좋다. 잠시만 기다려주쇼라
3) pagination 컴포넌트
그저 버튼일 뿐이다. 과연 그럴까? 밑에서 이어서 설명하겠다.
pagination logic 🟢
pageNumbers는 빈 배열이다. totalCards와 cardsPerPage는 NotifyPage에서 내린 props인데 각각 21과 6이다. Math.ceil은 숫자 올림에 관한 함수이다. 3.5를 올림하면 4이다. for 문을 돌며 pageNumbers 배열에 1부터 4가 추가될 것이고, 이것이 곧 버튼이 된다. 버튼을 클릭하면 paginate함수가 실행되는데, 인자로 해당 number를 전달한다.
NotifyPage에 처음 들어갔을 때 확인할 수 있는 정보다. 상태 초기화에 의해 당연히 currentPage는 1이다.
Last Card의 인덱스는 (page size * currentPage)이다. 1페이지의 마지막 카드 인덱스는 6이고, 2페이지의 마지막 카드 인덱스는 12이다.
First Card의 인덱스는 (indexOfLastCard - PageSize)이다. 1페이지의 첫 번째 카드의 인덱스는 0, 2페이지의 첫 번째 카드의 인덱스는 6이다.
=> 이 부분이 뭔가 이상한데, 이상하지 않다.
slice method에 전달한 두 인자는, 말 그대로 slice할 범위를 의미한다. 다만 두 번째 인자로 전달한 숫자는 포함하지 않는다. cardsData에 대해 slice를 적용하는데 해당 배열의 시작 인덱스는 0이다. 6을 두 번째 인자로 전달해야, 0부터 5까지의 배열 데이터가 새로운 배열로 떨어지는 것이다.
paginate 함수는 그저 currentPage의 상태를 최신화하는 기능만을 수행한다.
따라서 NotifyPage의 카드 mapping 부분을 다시 보면, 1을 클릭했다고 가정했을 때, 카드 데이터의 0번 인덱스부터 5번 인덱스까지의 데이터를 카드 형태로 보여주고 있다는 점을 확인할 수 있다.
회고 🟢
어찌어찌 구현은 하는데 내 것이 아니라는 느낌이 든다. 그런데 당연한 게, 한 번 했다고 완벽히 이해되면 코딩은 아마도 노잼일 가능성이 높다. (고군분투+반복숙달) 하다가 이해되고, 원하던 모습이 화면으로 나오며 모든 로직이 머릿속에 그려질 때 도파민이 터지는 게 프론트의 매력이 아닐까... 상세 페이지를 자꾸 미루는데 어려워도 해야 된다. 주말에는 상세 페이지에 시간을 갈아 넣자. 이제는 더 이상 물러날 곳이 없드아...!
