React Router

npx create-react-router@latest my-react-router-app
cd my-react-router-app
pnpm install
pnpm run dev

import { type RouteConfig, route, index, layout, prefix } from "@react-router/dev/routes";

export default [
  // 1. 인덱스 라우트 (루트 페이지)
  index("./home.tsx"),

  // 2. 일반 라우트
  route("about", "./about.tsx"),

  // 3. 레이아웃 라우트 (URL에 영향 없음)
  layout("./auth/layout.tsx", [
    route("login", "./auth/login.tsx"),
    route("register", "./auth/register.tsx"),
  ]),

  // 4. 접두사(Prefix) 사용
  ...prefix("concerts", [
    index("./concerts/home.tsx"),
    route(":city", "./concerts/city.tsx"),
  ]),
] satisfies RouteConfig;

import type { Route } from "./+types/team";

// 데이터 로직: 컴포넌트 렌더링 전 실행
export async function loader({ params }: Route.LoaderArgs) {
  let team = await fetchTeam(params.teamId);
  return { name: team.name };
}

// UI 로직: loader에서 받은 데이터 사용
export default function Component({ loaderData }: Route.ComponentProps) {
  return <h1>Team Name: {loaderData.name}</h1>;
}

route("dashboard", "./dashboard.tsx", [
  index("./dashboard-home.tsx"), // /dashboard
  route("settings", "./settings.tsx"), // /dashboard/settings
])

import { Outlet } from "react-router";

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard Header</h1>
      <Outlet /> {/* 자식 컴포넌트들이 여기에 나타남 */}
    </div>
  );
}

// 동적 파라미터: /teams/123 -> params.teamId
route("teams/:teamId", "./team.tsx"),

// 선택적 파라미터: /categories 또는 /en/categories 모두 매칭
route(":lang?/categories", "./categories.tsx"),

// 여러 파라미터 조합
route("c/:catId/p/:prodId", "./product.tsx"),

route("files/*", "./files.tsx"), // /files/any/path/here
route("*", "./catchall.tsx"),    // 404 처리용

export async function loader({ params }: Route.LoaderArgs) {
  const splat = params["*"]; // "any/path/here"
}

import { Routes, Route } from "react-router";

function Wizard() {
  return (
    <div>
      <Routes>
        <Route index element={<StepOne />} />
        <Route path="step-2" element={<StepTwo />} />
      </Routes>
    </div>
  );
}

import type { Route } from "./+types/product";

export async function clientLoader({ params }: Route.ClientLoaderArgs) {
  // 브라우저의 fetch API 사용
  const res = await fetch(`/api/products/${params.pid}`);
  return await res.json();
}

// 데이터를 불러오는 동안 보여줄 UI
export function HydrateFallback() {
  return <div>로딩 중...</div>;
}

export default function Product({ loaderData }: Route.ComponentProps) {
  return (
    <div>
      <h1>{loaderData.name}</h1>
      <p>{loaderData.description}</p>
    </div>
  );
}

import type { Route } from "./+types/product";
import { fakeDb } from "../db";

export async function loader({ params }: Route.LoaderArgs) {
  // 서버 전용 API나 DB 직접 접근 가능 (클라이언트 번들에는 포함되지 않음)
  const product = await fakeDb.getProduct(params.pid);
  return product;
}

export default function Product({ loaderData }: Route.ComponentProps) {
  return (
    <div>
      <h1>{loaderData.name}</h1>
      <p>{loaderData.description}</p>
    </div>
  );
}

export async function loader({ params }: Route.LoaderArgs) {
  // 빌드 시점에 실행됨
  return await getProductFromCSVFile(params.pid);
}

import type { Config } from "@react-router/dev/config";

export default {
  async prerender() {
    // 미리 렌더링할 URL 목록을 반환
    let products = await readProductsFromCSVFile();
    return products.map((p) => `/products/${p.id}`);
  },
} satisfies Config;

export async function loader({ params }: Route.LoaderArgs) {
  // 초기 서버 데이터
  return { serverMessage: "Hello from Server" };
}

export async function clientLoader({ serverLoader, params }: Route.ClientLoaderArgs) {
  // 1. 서버 로더 실행 결과를 가져옴
  const serverData = await serverLoader();
  // 2. 클라이언트에서 추가 데이터 호출
  const clientRes = await fetch(`/api/products/${params.pid}`);
  const clientData = await clientRes.json();
  
  // 두 데이터 합치기
  return { ...serverData, ...clientData };
}

// 하이드레이션 시점에 clientLoader 강제 실행 설정
clientLoader.hydrate = true as const;

export function HydrateFallback() {
  return <div>초기화 중...</div>;
}

import type { Route } from "./+types/project";
import { Form } from "react-router";
import { someApi } from "./api";

export async function clientAction({ request }: Route.ClientActionArgs) {
  let formData = await request.formData();
  let title = formData.get("title");
  // 클라이언트 측 API 호출
  let project = await someApi.updateProject({ title });
  return project;
}

export default function Project({ actionData }: Route.ComponentProps) {
  return (
    <div>
      <Form method="post">
        <input type="text" name="title" />
        <button type="submit">수정</button>
      </Form>
      {actionData && <p>{actionData.title} 업데이트 완료!</p>}
    </div>
  );
}

import type { Route } from "./+types/project";
import { Form } from "react-router";
import { fakeDb } from "../db";

export async function action({ request }: Route.ActionArgs) {
  let formData = await request.formData();
  let title = formData.get("title") as string;
  // DB 직접 업데이트
  let project = await fakeDb.updateProject({ title });
  return project;
}

export default function Project({ actionData }: Route.ComponentProps) {
  return (
    <Form method="post">
      <input type="text" name="title" />
      <button type="submit">저장</button>
    </Form>
  );
}

export async function clientAction({
  request,
  serverAction,
}: Route.ClientActionArgs) {
  // 1. 요청을 복사합니다.
  const clonedRequest = request.clone();
  
  // 2. 복사본으로 클라이언트 로직 처리
  const formData = await clonedRequest.formData();
  const name = formData.get("name");
  console.log("클라이언트에서 확인한 이름:", name);

  // 3. 원본 request는 건드리지 않은 상태로 serverAction에 전달
  // (React Router 내부적으로 이 request를 서버로 보냅니다)
  const data = await serverAction();

  return data;
}

import { Form } from "react-router";

function MyComponent() {
  return (
    <Form action="/projects/123" method="post">
      <button type="submit">프로젝트 삭제</button>
    </Form>
  );
}

import { useSubmit } from "react-router";

function Quiz() {
  let submit = useSubmit();
  
  // 예: 시간이 초과되었을 때 자동으로 제출
  const onTimeout = () => {
    submit(
      { quizTimedOut: true },
      { action: "/end-quiz", method: "post" }
    );
  };
}

import { useFetcher } from "react-router";

function Task() {
  let fetcher = useFetcher();
  let isSaving = fetcher.state !== "idle";

  return (
    <fetcher.Form method="post" action="/update-task/1">
      <button type="submit">{isSaving ? "저장 중..." : "저장"}</button>
    </fetcher.Form>
  );
}

// GET 요청 시 데이터 확인 방법

export async function loader({ request }: Route.LoaderArgs) {
  // 1. URLSearchParams로 파라미터 추출
  const url = new URL(request.url);
  const searchTerm = url.searchParams.get("q"); 

  // 2. 또는 FormData를 생성해서 URL 기반으로 채우기
  const formData = await FormData.from(url);
  const searchTermFromForm = formData.get("q");

  // ... 로딩 로직 ...
  return { searchResults };
}

export async function action({ request }: Route.ActionArgs) {
  // POST 요청의 본문에서 데이터 읽기
  const formData = await request.formData();
  const name = formData.get("name"); // 문자열로 반환
  const age = formData.get("age"); // 문자열로 반환 (숫자로 변환 필요)

  // JSON 데이터 처리 (Content-Type: application/json)
  if (request.headers.get("Content-Type") === "application/json") {
    const jsonBody = await request.json();
    return { ...jsonBody, processed: true };
  }
  
  // ... 처리 로직 ...
}

const formData = new FormData();

// 데이터 추가
formData.append("name", "Gemini");
formData.append("tags", "AI");
formData.append("tags", "Adaptive"); // tags는 이제 ['AI', 'Adaptive'] 두 값을 가짐

// 데이터 수정 (덮어쓰기)
formData.set("name", "New Name"); // name은 이제 'New Name'이 됨

export async function clientAction({ request, serverAction }: Route.ClientActionArgs) {
  // 1. 기존 요청에서 FormData 추출
  const formData = await request.formData();

  // 2. 직접 데이터 추가 (예: 클라이언트에서 계산된 값, 타임스탬프 등)
  formData.set("clientTimestamp", new Date().toISOString());
  formData.append("extraInfo", "added-in-client");

  // 3. 서버로 보낼 때는 fetch 등을 통해 직접 제어하거나, 
  // serverAction에 변경된 formData를 전달해야 하는데 
  // React Router v7의 serverAction()은 기본적으로 원본 request를 사용합니다.
  
  // 만약 수정한 formData를 서버로 보내야 한다면 아래와 같이 새로운 Request를 생성합니다.
  const modifiedRequest = new Request(request, {
    method: "POST",
    body: formData,
  });

  // 4. 수정한 요청을 서버로 전달
  const data = await serverAction(modifiedRequest);

  return data;
}

const myData = { id: 1, role: "admin", status: "active" };

Object.entries(myData).forEach(([key, value]) => {
  formData.append(key, value);
});

export default function MyPage() {
  return (
    <form method="post">
      {/* 사용자에게 보이지 않지만 formData에 포함됨 */}
      <input type="hidden" name="timestamp" value={new Date().toISOString()} />
      <input type="hidden" name="isAdmin" value="true" />
      
      <input type="text" name="title" placeholder="제목" />
      <button type="submit">저장</button>
    </form>
  );
}

import { useSubmit } from "react-router"; // 또는 "react-router-dom"

export default function MyPage() {
  const submit = useSubmit();

  const handleCustomSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    
    // 1. 기존 폼 데이터 가져오기
    const formData = new FormData(event.currentTarget);
    
    // 2. 직접 데이터 추가
    formData.set("customData", "이 데이터는 제출 직전에 추가되었습니다.");
    formData.append("extraParam", 12345);

    // 3. 제출 (이때 action 또는 clientAction이 호출됨)
    submit(formData, { method: "post" });
  };

  return (
    <form onSubmit={handleCustomSubmit}>
      <input type="text" name="userName" />
      <button type="submit">보내기</button>
    </form>
  );
}

const submit = useSubmit();

const handleClick = () => {
  const myData = {
    id: "admin-01",
    role: "manager",
    token: "abc-123"
  };

  // 객체를 두 번째 인자로 넘기면 내부적으로 FormData를 생성해줍니다.
  submit(myData, { method: "post" });
};

import { useActionData, useSubmit } from "react-router";
import { useEffect, useState } from "react";

export default function MyPage() {
  const actionData = useActionData();
  const [persistedData, setPersistedData] = useState(null);

  // 1. actionData가 들어오면 스토리지에 저장
  useEffect(() => {
    if (actionData) {
      sessionStorage.setItem("my_action_result", JSON.stringify(actionData));
      setPersistedData(actionData);
    }
  }, [actionData]);

  // 2. 컴포넌트 마운트 시(새로고침 포함) 스토리지에서 복구
  useEffect(() => {
    const saved = sessionStorage.getItem("my_action_result");
    if (saved) {
      setPersistedData(JSON.parse(saved));
    }
  }, []);

  return (
    <div>
      {persistedData && <div>유지되는 데이터: {persistedData.message}</div>}
      <button onClick={() => {
        sessionStorage.removeItem("my_action_result");
        setPersistedData(null);
      }}>데이터 지우기</button>
    </div>
  );
}

// action.ts
export async function action({ request }) {
  // 처리 로직...
  const result = "success";
  // 데이터를 쿼리 파라미터에 담아 해당 페이지로 리다이렉트
  return redirect(`/my-page?result=${result}`);
}

// component.tsx
export default function MyPage() {
  const [searchParams] = useSearchParams();
  const result = searchParams.get("result"); // 새로고침해도 URL에 남아있으므로 유지됨

  return <div>결과: {result}</div>;
}

export async function clientAction({ serverAction }: Route.ClientActionArgs) {
  const data = await serverAction();
  
  if (data) {
    // 서버 응답을 받자마자 로컬스토리지에 백업
    localStorage.setItem("last_action_backup", JSON.stringify(data));
  }
  
  return data;
}

import { createCookieSessionStorage } from "react-router";

// 쿠키 설정 정의
export const { getSession, commitSession, destroySession } =
  createCookieSessionStorage({
    cookie: {
      name: "__session", // 쿠키 이름
      httpOnly: true,    // JS로 접근 불가 (보안 필수)
      maxAge: 60 * 60 * 24, // 1일 유지
      path: "/",         // 모든 경로에서 유효
      sameSite: "lax",   // CSRF 보호
      secrets: ["s3cret1"], // 쿠키 암호화 키
      secure: true,      // HTTPS에서만 전송
    },
  });

export async function action({ request }: Route.ActionArgs) {
  const formData = await request.formData();
  // ... 로그인 유효성 검사 로직 ...

  // 1. 기존 세션 가져오기 (없으면 새로 생성)
  const session = await getSession(request.headers.get("Cookie"));

  // 2. 세션에 데이터 저장
  session.set("userId", "student_123");
  session.set("userName", "홍길동");

  // 3. 리다이렉트 시점에 쿠키를 헤더에 포함 (commitSession)
  return redirect("/dashboard", {
    headers: {
      "Set-Cookie": await commitSession(session),
    },
  });
}

export async function loader({ request }: Route.LoaderArgs) {
  // 1. 쿠키에서 세션 읽기
  const session = await getSession(request.headers.get("Cookie"));
  
  // 2. 세션 데이터 확인
  if (!session.has("userId")) {
    return redirect("/login"); // 로그인 안 되어 있으면 튕겨내기
  }

  return { 
    userId: session.get("userId"),
    userName: session.get("userName") 
  };
}

// app/sessions.ts
export const { getSession, commitSession, destroySession } =
  createCookieSessionStorage({
    cookie: {
      name: "__session",
      // 핵심 설정: 메인 도메인을 지정합니다.
      // 로컬 개발 시에는 설정하지 않거나 'localhost'를 사용해야 합니다.
      domain: process.env.NODE_ENV === "production" ? "example.com" : undefined,
      httpOnly: true,
      maxAge: 60 * 60 * 24,
      path: "/", // 도메인 내 모든 경로에서 접근 가능
      sameSite: "lax",
      secrets: ["s3cret1"],
      secure: true, 
    },
  });

import { NavLink } from "react-router";

export function Navbar() {
  return (
    <nav>
      {/* end 속성은 경로가 정확히 일치할 때만 active 클래스를 붙입니다 */}
      <NavLink to="/" end>Home</NavLink>
      <NavLink to="/concerts">Concerts</NavLink>
    </nav>
  );
}

<NavLink
  to="/messages"
  style={({ isActive }) => ({
    fontWeight: isActive ? "bold" : "normal",
    color: isActive ? "red" : "black",
  })}
>
  Messages
</NavLink>

import { Link } from "react-router";

export function Footer() {
  return (
    <p>
      계정이 없으신가요? <Link to="/signup">회원가입</Link>
    </p>
  );
}

<Form action="/search">
  <input type="text" name="q" placeholder="검색어 입력..." />
  <button type="submit">검색</button>
</Form>

import { redirect } from "react-router";

// 로더에서 권한 체크 후 리다이렉트
export async function loader({ request }) {
  const user = await getUser(request);
  if (!user) return redirect("/login");
  return { user };
}

// 액션에서 데이터 생성 후 상세 페이지로 이동
export async function action({ request }) {
  const formData = await request.formData();
  const project = await createProject(formData);
  return redirect(`/projects/${project.id}`);
}

import { useNavigate } from "react-router";

export function InactivityLogout() {
  let navigate = useNavigate();

  // 예: 10분간 활동이 없으면 자동 로그아웃 페이지로 이동
  onInactivity(() => {
    navigate("/logout");
  });

  return null;
}

import { useNavigation, Outlet } from "react-router";

export default function Root() {
  const navigation = useNavigation();
  // 현재 이동 중인 위치(location)가 있으면 true
  const isNavigating = Boolean(navigation.location);

  return (
    <html>
      <body>
        {/* 페이지 상단에 전역 스피너 표시 */}
        {isNavigating && <GlobalSpinner />}
        <Outlet />
      </body>
    </html>
  );
}

import { NavLink } from "react-router";

function Navbar() {
  return (
    <nav>
      <NavLink to="/home">
        {({ isPending }) => (
          <span>홈 {isPending && <Spinner />}</span>
        )}
      </NavLink>
      
      <NavLink
        to="/about"
        style={({ isPending }) => ({
          color: isPending ? "gray" : "black",
        })}
      >
        소개
      </NavLink>
    </nav>
  );
}

import { useFetcher } from "react-router";

function NewProjectForm() {
  const fetcher = useFetcher();
  // fetcher.state가 "idle"이 아니면 제출 중
  const isSubmitting = fetcher.state !== "idle";

  return (
    <fetcher.Form method="post">
      <input type="text" name="title" />
      <button type="submit">
        {isSubmitting ? "제출 중..." : "제출"}
      </button>
    </fetcher.Form>
  );
}

const navigation = useNavigation();
const isSubmitting = navigation.formAction === "/projects/new";

function Task({ task }) {
  const fetcher = useFetcher();

  // 기본값은 서버에서 온 데이터
  let isComplete = task.status === "complete";

  // 만약 현재 폼이 제출 중이라면, 폼에 담긴 데이터를 우선 UI에 반영 (낙관적 업데이트)
  if (fetcher.formData) {
    isComplete = fetcher.formData.get("status") === "complete";
  }

  return (
    <div>
      <span>{task.title} (상태: {isComplete ? "완료" : "진행 중"})</span>
      <fetcher.Form method="post">
        <button name="status" value={isComplete ? "incomplete" : "complete"}>
          {isComplete ? "취소하기" : "완료하기"}
        </button>
      </fetcher.Form>
    </div>
  );
}