[React.js] json() 유틸리티 함수 (React Router)

json() 유틸리티 함수 (React Router)

들어가며

• 리액트 라우터(React Router)에서 제공하는 @json()@ 유틸리티 함수에 대해 정리해본다.

 

json()

개념

• 리액트 라우터(React Router)에서 제공하는 함수
• React Router v6.4에서 추가된 유틸리티 함수
• 주로 라우터 핸들러에서 사용되며, JSON 형식의 데이터를 응답(Response)으로 반환한다.

 

특징

1. 자동 설정된 Content-Type
   • @json()@ 함수는 반환된 응답의 @Content-Type@ 헤더를 @application/json@으로 자동으로 설정한다.
2. 간편한 사용
   • JSON 형식의 데이터를 반환하는데 필요한 코드를 간소화하여, 개발자가 보다 직관적이고 간편하게 사용할 수 있게 한다.
3. 상태(Status) 코드 설정 가능
   • @json()@ 함수는 선택적으로 상태 코드를 설정할 수 있다.
   • 예) @return json(data, { status: 200 });@ (@json()@ 함수의 두 번째 인자에 상태코드를 객체 형식으로 넣어준다.)

 

사용 예제

예제 1

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

function loader() {
  const data = {
    message: "Hello, World!",
    timestamp: Date.now()
  };

  return json(data);
}

 

예제 2

import { createBrowserRouter, RouterProvider, Route } from "react-router-dom";
import { json } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
    loader: async () => {
      const data = { message: "Hello, World!" };
      return json(data);    // JSON 형태로 응답
    },
  },
]);

function HomePage() {
  const data = useLoaderData();

  return (
    <div>
      <h1>{data.message}</h1>
    </div>
  );
}

function App() {
  return <RouterProvider router={router} />;
}

export default App;

 

참고 사이트

json v6.24.1 | React Router