router.query의 값 undefined

UserId가 읽히지 않는 문제가 발생했다.

문제

메인 페이지에서 게시물로 들어가는 로직에서 router를 통해서 값을 전달하고, 해당 값을 통해서 api요청을 보내는 로직을 짰다.

여기서 문제점은, 분명 api요청도 잘 갔고, 실제 데이터도 잘 불러온다는 것이다.

그래서 처음에는 router로 값을 전달할 때가 문제인지 모르고, api요청부분에서 무한 삽질을 진행했었다...
결국 경로를 타고타고 콘솔을 하나하나 찍어보는 노가다를 진행하다가, router로 boardId 게시글의 아이디를 전달할 때, 처음에 undefined가 떴다가, 정상적으로 값이 들어가는것을 발견했다.

해결

결국 router쪽에서 문제가 발생한 걸 알았기 때문에 router에서 콘솔을 찍어보면서 확인하다가. 생각보다 많은 기능들이 있었다.

asPath : basePath 또는 locale 없이 브라우저에 표시되는 경로 (쿼리포함)

basePath : 활성 basePath (활성화 된 경우)

defaultLocale : 현재 기본 locale (활성화 된 경우)

isFallback : 현재 페이지가 fallback 모드인지 여부

isPreview : 앱이 현재 미리보기 모드인지 여부

isReady : 라우터 필드가 클라이언트 측에서 업데이트되고 사용할 준비가 되었는지 여부. useEffect 메소드 내에서만 사용해야하며 서버에서 조건부로 렌더링 하는 데에 사용해야한다.

locale : 활성 로케일 (활성화 된 경우)

locales :지원되는 모든 로케일 (활성화 된 경우)

pathname : 현재 경로. 이는 /pages 의 페이지 경로이며(파일명) 구성된 basePath 또는 locale 은 포함되지 않는다.

query : 객체로 구문 분석 된 쿼리 문자열. 페이지에 데이터 가져오기 요구사항이 없는 경우 사전 렌더링 중에 빈 객체가 된다. 기본값은 {}

여기서 router.isReady를 활용해서 받아오면 될 것 같았다.

적용

import React from 'react';
import { useRouter } from 'next/router';
import PostUnitTemplate from '../templates/post-unit-temp/PostUnitTemplate';

const UnitPost = () => {
  const router = useRouter();

  return (
    <div>
      <React.Suspense fallback={<h1>loading</h1>}>
        {router.isReady && (
          <PostUnitTemplate boardId={Number(router.query.boardId)} />
        )}
      </React.Suspense>
    </div>
  );
};

export default UnitPost;

query값을 전달하는 부분에서 router.isReady를 활용해서 값이 사용될 준비가 되었다는 것을 명시해 주고, 값이 넘어가게 했다.

추가사항

나와 같은 케이스에 대해서 구글링하다보니깐 getServerSideProps를 사용해서 같은 문제를 해결하는 경우가 있었다.
참고블로그

이렇게 적용하니깐 에러가 사라졌다
편-안