작성한 질문수 8

1

안녕하세요! 찬호님!

?page=4 와 같이 "?"로 시작하는 부분을 쿼리스트링이라고 부릅니다!^^
이것은 아주 쉽게 말하면, 특정 주소에 들어갔을 때 "변수를 문자열로 함께 넘겨주는 규칙" 정도로 보시면 좋을 것 같아요!

// 1. 게시글 목록 페이지
/boards

// 2. 게시글 목록 페이지 => 페이지: 4페이지
/boards?page=4

// 3. 게시글 목록 페이지 => 페이지: 4페이지, 검색어: `사과`
/boards?page=4&search=사과

위 2번과 같이 page라는 변수에, 4라는 값을 넘겨줄 수 있고,
위 3번과 같이 2개 이상의 변수를 &로 연결하여 넘겨줄 수도 있어요!^^

저렇게 입력하여 접속하는 경우, 위 3개의 경우 모두 /boards 페이지로 접속되며, useRouter를 사용하여 각 변수를 추출하실 수 있답니다!

그렇다면, 해당 값을 기본값으로 fetch를 진행하시면 되겠죠?!

* 여기서 잠깐!
그렇다면 /boards/[page]/[search] 와는 무슨 차이가 있을까요?!
위처럼 주소로 고정시키는 방법을 PathVariable 이라고 해요!

PathVariable: /boards/[page]/[search]/[order]
QueryString(QueryParamater): /boards?page=4&search=사과&order=desc

PathVariable은 각각을 하나의 완전체 페이지로 인식하여, 검색엔진에 잘 노출되지만,
조건이 붙거나 삭제되거나 생략될 때마다 주소가 변경되는 리스크가 있어요!
예를들면, 위 PathVariable에서 search가 없다면 아래처럼 order 값이 search값을 덮어써버려요!
/boards/[page]/[search]/[order] => /boards/[page]/[order]

이러한 이유에서, 검색이 잘 되어야하는 하나의 완전체 페이지인 상세페이지 등에는 PathVariable을 사용하지만, 조건이 언제든 추가될 수 있어 주소(nextjs 에서는 page)변경 문제를 갖는 정렬/검색/필터와 같은 곳에는 QueryString(QueryParamater)을 사용한답니다!^^

0

Apollo-Setting의 InMemoryCach()를 함수 밖으로 꺼내니까 해결 했습니다 허허;

0

강사님 router.push로 query를 사용하고 해당 page 값은

pagination을 통해 이동하면 주소 변경은 제대로 이뤄집니다.

또한 fetchBoards의 refetch 또한 variable에 page 값 들어가 한번 요청을 하는데

router.push를 하니까 추가로 2개의 API 요청을 합니다.

총 3개로 다음과 같이 요청을 합니다.

첫 번째는 fetchBoards로 variables: {page: 9} 값이 잘 들어와 있는데

두 번째 / 세 번째에서는 처음 접속 또는 새로고침 했을 때 요청 했을 때와 같은 API 요청을 합니다.

이 두 개 또한 variables가 비어있습니다.

그래서 그런지 다른 건 잘 되는데 해당 page의 게시물 목록 이동이 안됩니다.

(10 페이지 클릭을 해도 1페이지만 보여집니다.)

그래서 uesEffect를 사용해서 페이지 이동으로 page값이 변경이 되면 refetch하도록 했는데도 같은 결과가 나옵니다.

const [startPage, setStartPage] = useRecoilState(isStartPageState);
  const [activePage, setActivePage] = useRecoilState(isActivePageState);

const onClickPage = (event: MouseEvent<HTMLSpanElement>): void => {
    const active = Number(event.currentTarget.id);
    setActivePage(active);
    // 기존 refetch만 사용 시
    // void props.refetch({ page: active });

    void router.push({
      pathname: "/boards",
      query: { page: active },
    });
  };
  console.log(activePage);

  useEffect(() => {
    void props.refetch({ page: activePage });
    console.log(activePage, "Recoil");
  }, [activePage]);

위 코드는 pagination에서 1~10까지 게시물 이동에 대한 클릭 함수입니다.

해당 방법이 맞는지 궁금합니다.

const onClickPage = (event: MouseEvent<HTMLSpanElement>): void => {
    const active = Number(event.currentTarget.id);
    // setActivePage(active);

    void router.push({
      pathname: "/boards",
      query: { page: active },
    });
  };

  useEffect(() => {
    void props.refetch({ page: Number(router.query.page) });
  }, [router.query]);

0

자세한 답변 감사합니다!!