[React] loader, action (2), json()

이전 글에 이어서 사용법을 더 자세히 정리해보자.

그 전에 새로운 Response를 생성할 때 매번

throw new Response(JSON.stringify({ message: "POST 불러오기 실패" }), {
  status: 500,
});

이런 방식으로 생성하려면 귀찮다. 따라서 리액트 라우터에 있는 헬퍼 유틸리티를 사용할 수 있다.
react-router-dom에서 json을 import하여 사용하면 된다.
json은 json 형태의 데이터가 포함된 Response 객체를 생성하는 함수이다.

return json({ message: "POST 불러오기 실패" }, { status: 500 });

이렇게 하면 장점이 뭐냐면, Response 데이터를 사용하는 곳에서 수동으로 JSON 형식을 파싱할 필요가 없어진다.
ErrorPage 코드가 다음과 같이 수정된다

// json() 사용 전
  if (error.status === 500) {
    message = JSON.parse(error.data).message;
  }

// json() 사용 후
  if (error.status === 500) {
    message = error.data.message;
  }

이제 아래에서 article의 제목을 누르면 상세 페이지로 이동하고 싶다.

loader에서 동적 라우트를 활용하려면 Link 컴포넌트를 활용할 수 있다.

<li key={post.id}>
  <Link to={post.id}>{post.title}</Link>
</li>

'to' 프로퍼티를 사용하면 해당 컴포넌트를 클릭할 시 이동할 주소를 적용할 수 있다. 라우터에서 'articles' 의 children에 detailPage를 등록시켜 두었기 때문에, 상대경로로 이동할 수 있다.

import { useParams } from "react-router-dom";

function ArticleDetailPage() {
  const params = useParams();

  return (
    <>
      <p>Article Detail Page</p>
      <p>{params.articleId}</p>
    </>
  );
}

export default ArticleDetailPage;

이렇게 useParams로 detailPage의 articleId를 불러올 수 있다. 이를 이용하여 실제 상세 페이지를 구축한다.

import { useParams, json, useLoaderData } from "react-router-dom";

function ArticleDetailPage() {
  const data = useLoaderData();
  const params = useParams();

  console.log(data);
  return (
    <>
      <p>Article Detail Page</p>
      <p>{params.articleId}</p>
      <p>title : {data.title}</p>
      <p>body : {data.body}</p>
    </>
  );
}

export default ArticleDetailPage;

export async function loader({ request, params }) {
  const id = params.articleId;

  const response = await fetch(
    "https://jsonplaceholder.typicode.com/posts/" + id
  );

  if (response.status !== 200) {
    return json({ message: "Detail Page 불러오기 실패" }, { status: 500 });
  } else {
    const resData = await response.json();
    return resData;
  }
}

ArticleDetailPage.jsx에 상세글에 대한 정보를 가져오는 loader 함수를 정의한다. 이때, request와 params를 받아올 수 있으며 해당 프로퍼티를 통해 요청에 대한 정보를 얻을 수 있다.
params.articleId를 이용해서 params를 가져올 수 있는데 이때 articleId는 라우터에 등록되어 있는 ":articleId" 상대 경로에서 따오는 것이다. 그리고 라우터에 loader 함수도 등록해야 한다.