Remix 걸음마

GPT생겨서 공부하기 참 쉬워졌쥬..

1️⃣ 공식문서 초기 세팅 (이건 꼭 해라)

✔️ 프로젝트 생성
npx create-react-router@latest

Remix v2는 이제 React Router에 흡수됐어.
👉 Remix = React Router + 서버 기능 이라고 생각해.

2️⃣ 생성 후 구조부터 이해 (중요 ⭐⭐⭐)

처음 보면 이게 제일 멘붕이야.

app/
 ├─ routes/
 │   ├─ _index.tsx
 │   ├─ login.tsx
 │   └─ posts.$id.tsx
 ├─ root.tsx
 └─ entry.server.tsx

핵심만 딱 정리해줄게

• routes/ = 페이지
• 파일 이름 = URL

이거 하나만 기억해도 반은 이해함

• routes/login.tsx → /login
• routes/posts.$id.tsx → /posts/123

👉 React Router의 안 써도 됨
👉 파일이 라우터다

3️⃣ Remix에서 제일 중요한 개념 TOP 4

🧠 ① loader (서버에서 데이터 가져오기)

export const loader = async () => {
  return { message: 'hello' };
};

✔️ 이 함수는 브라우저에서 실행 안 됨
✔️ 서버에서만 실행

const data = useLoaderData<typeof loader>();

👉 API 호출 + 상태관리 + 로딩을 한 번에 해결

🧠 ② action (폼 submit 처리)

export const action = async ({ request }) => {
  const formData = await request.formData();
  return null;
};

✔️ POST / PUT / DELETE 전용
✔️ 서버에서 실행됨

👉 axios.post() + onSubmit 안 써도 됨

🧠 ③ Form (Remix 전용)

<Form method="post">
  <input name="email" />
  <button type="submit" />
</Form>

👉 submit 하면 자동으로 action() 실행
👉 새로고침 ❌
👉 상태관리 ❌

🧠 ④ useNavigation (로딩 상태)

const navigation = useNavigation();

navigation.state === 'loading'
navigation.state === 'submitting'

👉 버튼 로딩 처리, 스피너 여기서 함

4️⃣ “아 그래서 뭐가 좋은데?” (리액트랑 비교)

리액트	Remix
useEffect로 API 호출	loader에서 서버 호출
axios + 상태관리	기본 제공
폼 submit 직접 처리	action 자동
로딩 상태 직접 관리	navigation