Link 태그 (+ useSearchParams)

📌Link태그를 활용한 라우팅 구현 및 데이터 전달

Next.js 13버전부터 Link태그 사용 시, 쿼리를 전달하고 받는 과정이 다소 불편해졌다. chatGPT와 구글링을 통해 찾아보다가 해답을 찾기가 쉽지 않아서 공식문서를 참고하여 해결했다.

<Link
  href={{
    pathname: `/record/${post.id}`,
    query: {
    	post: JSON.stringify(post),
    },
  as={`/record/${post.id}`}
  }}
>
<MdOutlineModeEditOutline />
</Link>

위 코드는 Link태그로 게시글 수정페이지로 이동하는 부분인데, query에 post 부분에 JSON.stringify를 사용하여 객체를 문자열 형태로 보내주었다.(객체 형태로는 보낼 수 없음)

const searchParams = useSearchParams();
const param: any = searchParams.get("post");
const post = JSON.parse(param);

수정페이지로 와서 import { useSearchParams } next/navigation 해주고 문자열로 전달한 쿼리 값을 파싱하여 post변수에 할당하였다.

방법을 알고나면 매우 간단한데 최신 버전에 대한 정보가 아직은 많지 않아서 공식문서를 참고하는 것이 최선일 듯 하다.