NextJS URL query 관리

문제상황

URL에 있는 query로 목록 리스트에 정보를 관리하고 있는데

import { useRouter } from "next/router";
import { useState } from "react";

const [category, setCategoty] = useState<sting>(router.query.category?.toString() ? router.query.category?.toString() : "");

위에 코드와 같이 router에 query값을 가져와 state에 set를 해주니 순서가 꼬이는 이슈가 있었다.

해결방안

view에서 url query data를 바로 가져오지말고
getServerSideProps를 사용하여 URL에 query를 가져오기

export const getServerSideProps: GetServerSideProps<PageProps> = async (
  context
) => {
  if (context.query) {
    return {
      props: {
        category: context.query?.category
          ? (context.query?.category?.toString() as string)
          : ("카테고리1" as string)
      },
    };
  } else {
    return {
      notFound: true,
    };
  }
};

위에 코드와 같이 getServerSideProps를 통해 URL query값을 가져와

interface PageProps {
  category: string;
}

const ExamplePage: NextPage<PageProps> = (props) => {
  return (
    <div>
      <ExampleView
        category={props.category}
      />
    </div>
  );
};

ExampleView 에 category date를 넘겨주면 된다.
이렇게 처리할 경우 순서가 보장된다.

먼저 해당 페이지 렌더링 시 getServerSideProps이 먼저 호출되고
view가 호출된다. ( 너무 당연했지만 이렇게 처리하는 방법을 알아내기까지 한참 돌고돌아 해결했다... )

나의 경우는 전연 관리가 아닌 URL query로 data를 헨들링하기때문에 이렇게 처리해주었다.

전역으로 관리 할 경우 생기는 위험요소가 많아 최대한 전역으로 관리 하지 않고 query나 다른 방안을 찾아 처리하고 있는데 생각보다 많이 어렵다.

또한 이게 맞는 방법인지는 모르겠다 계속하면서 이렇게 저렇게 많은 시도를 해보고 있는데 하다가 아니다 싶으면 글 수정하는걸로..!