Today

1. 뉴스피드 project

• 페이지네이션 기능 구현
  

👉 페이지네이션 구현 과정

앞으로 해야 할 작업

• supabase를 이용해 데이터 저장 및 읽어오기

2. 알고리즘 수업

3. react 스탠다드반 수업

• Custom Hook
  => #1 과제를 해결하는데 있어 기능 구현 후 리펙토링을 통해 페이지네이션을 하나의 커스텀 훅에 묶어둘 수 있었음. 👍
• Supabase
  아직 수업을 들어도 무슨 말인지 모르겠다. 언제 복습하고 써먹지

---

Learn

주말에 페이지네이션을 어떻게 구성 할 지 머릿속으로 생각은 해봤지만 막상 코드를 짜려니 막막했다.

그러다가 알고리즘 수업에서 적용했던 방식을 적용해보기로 했다.
해결 과정을 천천히 적어보는 것

1. 총 게시물 수는? : totalPost
2. 한 페이지에 나타 낼 게시물 수는? : postPerPage
3. 한 게시판에 페이지를 몇개 씩 나타낼 것인가? : pagePerBoard
4. 총 페이지 수는? : totalPage
5. 현재 페이지는? : currentPage
   .
   .
   .

이런 식으로 하나씩 적어보고 그것을 다시 코드로 구현해봤더니
어느정도 작동을 하는 코드가 만들어지고 있었다.

const totalPost =
      boardTitle === '최신글'
? posts.map((post) => <Post key={post.id} post={post} />).length
: filteredPosts.map((post) => <Post key={post.id} post={post} />).length;

const postPerPage = 10;
const pagePerBoard = 5;
const totalPage = Math.ceil(totalPost / postPerPage);
const currentPage = Number(useLocation().search.replace(`?page=`, ''));

새롭게 배운 개념 : 쿼리스트링

• 쿼리스트링 useSearchParams
  URL 의 한 부분으로, 요청하는 URL 에 부가정보를 포함할 때 사용

형태

예로 들어보면 ?page=1에 해당하는 부분이 쿼리스트링의 형태!

쿼리스트링 저장, 가져오기, 활용

const [searchParams, setSearchParams] = useSearchParams();

...map((num)=><button onClick={()=>setSearchParams({ page: num })} />)

위에서 setSearchParams로 쿼리스트링을 설정 해주고 나서
useLocation()를 콘솔에 찍어보면 아래와 같이 나온다.

그것을 활용하기 위해 가공해보자.

useLocation().search.replace(`?page=`, '') // 1

나는 가공해서 나온 쿼리스트링 데이터를 가지고 currentPage로 설정해서 페이지네이션을 구현했다.

slice 활용

페이지네이션을 구현하는데 가장 큰 역할을 했던 메서드
갖고 있는 데이터를 가지고 처음 시작은 무엇이고 어디까지 인지 보여줄지에 대해서 활용 가능했다.

예시

const [start, setStart] = useState(1);

const showPage = () => {
  const page = [];
  for (let i = 1; i <= totalPage; i++) {
    page.push(i);
  }
  return page.slice(start - 1, start - 1 + 5).map((num) => (
    <StButton key={num} $active={num === currentPage} onClick={() => setSearchParams({ page: num })}>
      {num}
    </StButton>
  ));
};

useEffect 활용

기능을 구현하다 보면 만든 로직들이 다른 로직이나 상태들과 긴밀하게 연관이 있는 경우가 많다.
그때, 의존성 배열을 활용하는 useEffect 훅을 사용해서 연관을 지어줬다.

예시

useEffect(() => {
  if (currentPage === start + pagePerBoard) setStart((prev) => prev + pagePerBoard);
  if (currentPage < start) setStart((prev) => prev - pagePerBoard);
}, [currentPage, start]);

---

주절주절

하고 싶은 것도 해야할 것도 많은데 시간이 부족하다 하루를 36시간 줬으면 더 많은 것을 해볼 수 있을텐데..

시간 활용을 잘 할 수 밖에 없다.