# React Router로 인앱 피드백 폼 만들기 > React Router 8 피드백 폼입니다. 리소스 라우트 액션이 쿠키 세션을 읽고, fetcher가 레이아웃에서 POST하며, JS 없는 POST는 원래 페이지로 리디렉션됩니다. 2026-10-25 게시 · https://ikiform.com/ko/guides/feedback-form/react-router 로그인한 라우트를 감싸는 레이아웃에 피드백 폼 하나를 마운트하고 `useFetcher`로 리소스 라우트에 POST하세요. 그 액션은 쿠키 세션에서 사용자를 읽고, `Referer`에서 페이지를 가져와, 시크릿 키로 평점을 폼 백엔드에 전달합니다. JavaScript가 로드되지 않았을 때는 같은 액션이 원시 JSON으로 응답하는 대신 페이지로 리디렉션합니다. [메인 가이드의 React Router 탭](https://ikiform.com/ko/guides/feedback-form.md#form)은 fetcher로 공개 페이지 폼을 POST합니다. 여기서는 폼이 로그인 뒤 앱 안에 있고, 누가 보냈는지는 액션이 정합니다. 키, 허용 도메인, 기본 사항은 [서버 프레임워크 문서 가이드](https://ikiform.com/ko/docs/guides/server.md)를 참고하세요. 코드는 프레임워크 모드의 React Router 8을 대상으로 합니다. ## 레이아웃 fetcher가 바꾸는 것 레이아웃에 있는 피드백 폼은 모든 화면에 동시에 있고, React Router는 사용자가 이동하는 동안 이를 마운트된 채로 둡니다. 원하던 바이지만, 메인 가이드에서는 답할 필요가 없던 네 가지 질문이 생깁니다. | 고려 사항 | 레이아웃에서 | 이 페이지의 처리 방식 | | --- | --- | --- | | 누가 보냈는지 | 브라우저가 아무 사용자라고 주장할 수 있음 | 액션이 서명된 쿠키 세션을 읽음 | | 어느 화면인지 | 폼은 어떤 자식 라우트가 표시 중인지 모름 | 각 라우트가 `handle`에 자기 이름을 적고, `useMatches`로 읽음 | | 남은 상태 | fetcher의 `data`가 내비게이션 후에도 남음 | `key` 옵션으로 화면마다 fetcher 하나 | | 아직 JavaScript 없음 | `fetcher.Form`은 실제 폼이므로 브라우저가 리소스 라우트로 POST함 | 액션이 문서 POST를 감지해 원래 페이지로 리디렉션 | 다이어그램: React Router 피드백 POST가 같은 리소스 라우트에 도달하는 두 가지 방법 1. 사용자가 레이아웃이 모든 로그인 라우트에 렌더링하는 폼에서 화면을 평가합니다. 2. 하이드레이션 후에는 fetcher가 백그라운드에서 POST합니다. 액션이 쿠키 세션, Referer의 페이지, 화면 이름을 읽습니다. 3. 액션이 사용자 정보를 붙여 시크릿 키로 Ikiform에 POST합니다. 4. 결과가 data()로 돌아와 내비게이션 없이 그 자리에 표시됩니다. 5. 하이드레이션 전에는 브라우저가 폼을 문서로 POST합니다. 액션은 내비게이션임을 보고, 결과를 쿼리에 담아 원래 페이지로 리디렉션합니다. 액션 하나, 호출자 두 종류. 브라우저 내비게이션만 리디렉션을 받고, fetcher 호출은 데이터를 받습니다. ## 프로젝트 설정 `create-react-router`로 만든 프로젝트에서 관련된 파일들입니다. `프로젝트 트리`: ```text app/ routes.ts sessions.server.ts components/ feedback-form.tsx routes/ api.feedback.ts app-layout.tsx project-settings.tsx ``` 액션용 리소스 라우트와 로그인 화면용 경로 없는 레이아웃을 추가하세요. 액션이 있고 기본 export가 없는 모듈은 리소스 라우트이므로 아무것도 렌더링하지 않습니다. `app/routes.ts`: ```ts import { layout, route, type RouteConfig } from "@react-router/dev/routes"; export default [ route("api/feedback", "routes/api.feedback.ts"), layout("routes/app-layout.tsx", [route("projects/:id/settings", "routes/project-settings.tsx")]), ] satisfies RouteConfig; ``` **API keys**에서 `submissions:write` 스코프로 시크릿 키를 만드세요. 서버는 두 값을 `process.env`에서 읽습니다. 서버가 실행되는 곳에 설정하고, 키에 `VITE_` 접두사는 절대 붙이지 마세요. 클라이언트 번들에 들어갑니다. `.env`: ```bash IKIFORM_SECRET_KEY=ik_sk_your_secret_key SESSION_SECRET=a-long-random-string ``` 폼의 **Fields** 탭에 아래 정의를 붙여 넣으세요. 사람은 두 필드를 입력하고 나머지는 액션이 채우며, 세션의 `email` 덕분에 각 알림의 **Reply**가 그 사람에게 갑니다. 폼: In-app feedback - **이 화면은 어떠신가요?** (`rating`, rating, 필수) - **무엇이 더 좋아지면 될까요?** (`comment`, textarea) - **페이지** (`page`, url) - **화면** (`screen`, text) - **사용자** (`user_id`, text) - **이메일** (`email`, email) `rating`에 `9`나 정의에 없는 필드를 보내면 액션이 받는 `422`를 볼 수 있습니다. ## 만들기 ### 쿠키 세션에서 사용자 읽기 `createCookieSessionStorage`는 `secrets`로 쿠키에 서명하므로, 사용자는 읽을 수는 있어도 바꿀 수는 없습니다. 로그인에서 이미 세션을 쓰고 있다면 그 스토리지를 재사용하고 `readUser`를 추가하세요. `app/sessions.server.ts`: ```ts import { createCookieSessionStorage } from "react-router"; interface SessionData { userId: string; email: string; } export const { getSession, commitSession, destroySession } = createCookieSessionStorage({ cookie: { name: "__session", httpOnly: true, path: "/", sameSite: "lax", secrets: [process.env.SESSION_SECRET ?? ""], secure: process.env.NODE_ENV === "production", }, }); export async function readUser(request: Request) { const session = await getSession(request.headers.get("Cookie")); const id = session.get("userId"); const email = session.get("email"); return id && email ? { id, email } : null; } ``` `.server` 접미사는 모듈을 클라이언트 번들에서 제외합니다. 컴포넌트에서 import하면 빌드가 실패합니다. ### 리소스 라우트 `app/routes/api.feedback.ts`: ```ts import { data, redirect } from "react-router"; import { readUser } from "~/sessions.server"; import type { Route } from "./+types/api.feedback"; const SCREEN = /^[a-z0-9/._-]{1,120}$/; function samePage(referer: string | null, origin: string) { try { const url = new URL(referer ?? ""); return url.origin === origin ? url.pathname : ""; } catch { return ""; } } export async function action({ request }: Route.ActionArgs) { const form = await request.formData(); const origin = new URL(request.url).origin; const path = samePage(request.headers.get("Referer"), origin); const native = request.headers.get("Sec-Fetch-Mode") === "navigate"; function reply(status: "sent" | "error", message: string, code = 200) { if (native) return redirect(`${path || "/"}?feedback=${status}`); return data({ status, message }, { status: code }); } const user = await readUser(request); if (!user) return reply("error", "You were signed out. Sign in, then send it again.", 401); const rating = Number(form.get("rating")); if (!Number.isInteger(rating) || rating < 1 || rating > 5) return reply("error", "Choose a score first.", 400); const screen = String(form.get("screen") ?? ""); let response: Response; try { response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`, Origin: origin, }, body: JSON.stringify({ rating, comment: String(form.get("comment") ?? "").slice(0, 4000), page: path ? origin + path : "", screen: SCREEN.test(screen) ? screen : "unknown", user_id: user.id, email: user.email, _gotcha: String(form.get("_gotcha") ?? ""), }), signal: AbortSignal.timeout(8000), }); } catch { return reply("error", "Feedback is unreachable right now. Try again shortly.", 502); } const result = await response.json().catch(() => null); if (result?.ok) return reply("sent", "Got it. Thank you."); return reply("error", result?.error?.fields?.comment?.[0] ?? result?.error?.message ?? "That didn't go through.", 502); } ``` - `samePage`는 `Referer`가 내 origin일 때만 경로를 남기고, 앱 URL에 ID와 토큰이 담기는 쿼리 문자열은 버립니다. - 브라우저가 직접 폼을 페이지 로드로 제출하면 `Sec-Fetch-Mode`가 `navigate`입니다. fetcher는 백그라운드 요청으로 보내므로 `data()`를 받고, 나머지는 모두 리디렉션을 받습니다. - 오류는 예외 대신 4xx나 5xx `data()`를 씁니다. 예외를 던지면 가장 가까운 `ErrorBoundary`까지 올라가 사용자가 작업하던 화면을 대체합니다. - `Origin`은 요청 자체의 origin으로 설정됩니다. `react-router dev`에서는 `http://localhost:5173`이고, 프로덕션에서는 내 도메인입니다. ### 폼 `app/components/feedback-form.tsx`: ```tsx import { useFetcher, useMatches, useSearchParams } from "react-router"; import type { action } from "~/routes/api.feedback"; const SCORES = ["Blocked", "Painful", "Okay", "Smooth", "Excellent"]; function useScreen() { const named = useMatches().flatMap((match) => { const screen = (match.handle as { screen?: string } | undefined)?.screen; return screen ? [screen] : []; }); return named.at(-1) ?? "unknown"; } export function FeedbackForm() { const screen = useScreen(); const fetcher = useFetcher({ key: `feedback:${screen}` }); const [params] = useSearchParams(); const busy = fetcher.state !== "idle"; const fallback = params.get("feedback"); const sent = fetcher.data?.status === "sent" || fallback === "sent"; const error = fetcher.data?.status === "error" ? fetcher.data.message : fallback === "error" ? "That didn't go through." : ""; if (sent) return

Got it. Thank you.

; return (
How is this screen working for you? {SCORES.map((label, index) => ( ))}