remix-run/react-router-프레임워크-모드

react-router-프레임워크-모드은(는) 무엇을 하나요?

React Router의 프레임워크 모드를 사용하여 풀스택 React 애플리케이션을 구축합니다. 경로 구성, 로더 및 액션 작업, 폼 처리, 네비게이션 처리, 보류/낙관적 UI, 오류 경계 처리, react-router.config.ts 또는 기타 React Router 규칙 작업 시 사용하세요.

주요 기능

• 경로 구성: 중첩 라우트, 레이아웃 라우트, 인덱스 라우트를 정의합니다.
• 로더와 액션: 데이터 로딩 및 변이(Mutation)를 처리합니다.
• 폼 처리: <Form> 컴포넌트와 <fetcher.Form>을 사용합니다.
• 네비게이션: <Link>, <NavLink>, useNavigate 등을 사용합니다.
• 보류/낙관적 UI: useNavigation, useFetcher를 사용하여 UI 상태를 관리합니다.
• 오류 경계: 라우트 수준에서 오류를 처리합니다.
• 설정: react-router.config.ts 파일을 통해 프로젝트를 설정합니다.

사용 예시

// routes/users.tsx
import { useLoaderData, Form, useNavigation } from "react-router-dom";

export async function loader() {
  const users = await fetch("/api/users").then((res) => res.json());
  return { users };
}

export async function action({ request }) {
  const formData = await request.formData();
  const name = formData.get("name");
  // 사용자 생성 로직
  return { ok: true };
}

export default function Users() {
  const { users } = useLoaderData<typeof loader>();
  const navigation = useNavigation();

  return (
    <div>
      <h1>사용자 목록</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <Form method="post">
        <input name="name" placeholder="이름 입력" />
        <button type="submit" disabled={navigation.state === "submitting"}>
          {navigation.state === "submitting" ? "전송 중..." : "추가"}
        </button>
      </Form>
    </div>
  );
}

설정 파일

react-router.config.ts 파일을 사용하여 React Router 동작을 커스터마이징할 수 있습니다:

import { defineConfig } from "react-router/config";

export default defineConfig({
  // 루트 디렉토리 설정
  appDirectory: "app",
  // 경로 설정
  routes: [
    {
      path: "/",
      file: "routes/home.tsx",
    },
  ],
});

오류 경계

라우트 수준에서 오류를 처리하려면 ErrorBoundary 컴포넌트를 사용하세요:

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

export function ErrorBoundary() {
  const error = useRouteError();
  return (
    <div>
      <h1>오류가 발생했습니다</h1>
      <p>{error.message}</p>
    </div>
  );
}