Remix는 2021년 Ryan Florence와 Michael Jackson이 만든 풀스택 React 프레임워크다. 웹 표준(Web Fetch API, Form, URL)을 중심에 두고, 중첩 라우팅과 병렬 데이터 로딩으로 빠른 사용자 경험을 제공한다.
Next.js와 비교
| 항목 | Remix | Next.js |
|---|
| 라우팅 | 파일 기반 중첩 라우팅 | 파일 기반 |
| 데이터 로딩 | loader 함수 | fetch/RSC |
| 뮤테이션 | action 함수 | Server Actions |
| 에러 처리 | ErrorBoundary 중첩 | error.tsx |
| 웹 표준 | 강조 | 덜 강조 |
기본 라우트
typescript
// app/routes/posts.$postId.tsx
import { json, type LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData, Form } from '@remix-run/react';
// 서버에서 실행: 데이터 로딩
export async function loader({ params }: LoaderFunctionArgs) {
const post = await getPost(params.postId!);
if (!post) throw new Response('Not Found', { status: 404 });
return json({ post });
}
// 서버에서 실행: 폼 제출 처리
export async function action({ request, params }: LoaderFunctionArgs) {
const formData = await request.formData();
const comment = formData.get('comment');
await addComment(params.postId!, comment as string);
return json({ ok: true });
}
// 클라이언트 컴포넌트
export default function PostPage() {
const { post } = useLoaderData<typeof loader>();
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
{/* Form은 JS 없이도 동작 (Progressive Enhancement) */}
<Form method="post">
<textarea name="comment" />
<button type="submit">댓글 추가</button>
</Form>
</article>
);
}
중첩 라우팅과 에러 경계
typescript
// app/routes/dashboard.tsx
import { Outlet } from '@remix-run/react';
export default function Dashboard() {
return (
<div>
<nav>대시보드 네비게이션</nav>
<Outlet /> {/* 중첩 라우트 렌더링 */}
</div>
);
}
export function ErrorBoundary() {
return <div>대시보드 오류 발생!</div>;
}
관련 개념
