React Academy · 강의

로더와 동작(데이터 라우터 API)

렌더링 전에 로더로 경로 데이터를 가져오고 동작으로 양식 제출을 처리합니다.

로더와 동작(데이터 라우터 API)은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

로더란 무엇입니까

리액트 라우터 v6.4 이상의 데이터 라우터에서 로더는 라우트가 렌더링되기 전에 데이터를 가져오는 비동기 함수입니다. useEffect로 데이터를 가져오는 패턴을 대신합니다.

로더 정의하기

라우트 객체에 loader 속성을 추가합니다. 이 속성은 { params, request }를 받고 데이터(또는 응답 객체)를 반환합니다.

import { createBrowserRouter } from 'react-router-dom';

async function userLoader({ params }) {
  const res = await fetch(`/api/users/${params.id}`);
  if (!res.ok) throw new Response('Not Found', { status: 404 });
  return res.json();
}

const router = createBrowserRouter([
  { path: '/users/:id', element: <UserDetail />, loader: userLoader },
]);

useLoaderData로 로더 데이터 읽기

useLoaderData()는 로더가 반환한 값을 그대로 반환합니다. 컴포넌트는 로더가 완료된 후에만 렌더링됩니다.

import { useLoaderData } from 'react-router-dom';

function UserDetail() {
  const user = useLoaderData();
  return <h1>{user.name}</h1>;
}

액션이란 무엇입니까

액션은 데이터 변경(양식 제출, 삭제)을 처리하는 비동기 함수입니다. 양식 POST 후 라우트가 다시 렌더링되기 전에 실행됩니다.

async function createUserAction({ request }) {
  const formData = await request.formData();
  const name = formData.get('name');
  await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify({ name }),
    headers: { 'Content-Type': 'application/json' },
  });
  return redirect('/users');
}

Form으로 액션 실행하기

<form>을 리액트 라우터의 <Form>으로 바꿉니다. 제출하면 필드를 FormData로 직렬화하고 라우트의 액션을 호출합니다.

import { Form } from 'react-router-dom';

function NewUser() {
  return (
    <Form method="post">
      <input name="name" />
      <button type="submit">Create</button>
    </Form>
  );
}

액션에서 데이터 반환하기

액션은 리디렉션만이 아니라 데이터도 반환할 수 있습니다. 컴포넌트에서 useActionData()로 읽으며, 유효성 검사 오류를 반환할 때 유용합니다.

async function loginAction({ request }) {
  const data = await request.formData();
  const errors = validate(data);
  if (errors) return errors; // returned to useActionData
  await login(data);
  return redirect('/dashboard');
}

function Login() {
  const errors = useActionData();
  return (
    <Form method="post">
      {errors?.email && <p>{errors.email}</p>}
      <input name="email" />
    </Form>
  );
}

useNavigation으로 로딩 상태 처리하기

useNavigation()은 로더나 액션이 실행 중인지 알려 줍니다. 이를 사용해 로딩 표시기를 보이거나 제출 버튼을 비활성화할 수 있습니다.

function SubmitButton() {
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';
  return (
    <button type="submit" disabled={isSubmitting}>
      {isSubmitting ? 'Saving...' : 'Save'}
    </button>
  );
}

defer()를 사용한 지연 데이터

defer()를 사용하면 렌더링을 차단하지 않고 로더에서 느린 데이터 프로미스를 반환할 수 있습니다. 그런 다음 <Await>와 Suspense로 값을 꺼냅니다.

import { defer, Await } from 'react-router-dom';

async function slowLoader() {
  return defer({ fast: await getFast(), slow: getSlow() });
}

function Page() {
  const { fast, slow } = useLoaderData();
  return (
    <>
      <h1>{fast.title}</h1>
      <Suspense fallback={<p>Loading...</p>}>
        <Await resolve={slow}>{data => <Chart data={data} />}</Await>
      </Suspense>
    </>
  );
}

액션 후 재검증

액션이 완료되면 리액트 라우터가 활성화된 모든 로더를 자동으로 다시 실행해 데이터를 새로 고칩니다. 수동으로 다시 가져올 필요가 없습니다.

로더에서 오류 처리하기

로더에서 Response 또는 임의의 오류를 던지면 리액트 라우터가 이를 처리하고 라우트의 errorElement를 렌더링합니다. 오류는 useRouteError()로 접근할 수 있습니다.

function ErrorPage() {
  const error = useRouteError();
  return (
    <div>
      <h1>{error.status} {error.statusText}</h1>
    </div>
  );
}

탐색 없이 변경할 때 사용하는 Fetcher

useFetcher()를 사용하면 탐색하지 않고 로더나 액션을 호출할 수 있습니다. 페이지를 떠나지 않고 게시물에 좋아요를 누르는 인라인 양식 등에 유용합니다.

function LikeButton({ postId }) {
  const fetcher = useFetcher();
  return (
    <fetcher.Form method="post" action={`/posts/${postId}/like`}>
      <button type="submit">Like</button>
    </fetcher.Form>
  );
}

빠른 확인

라우트의 로더 함수가 반환한 데이터를 읽는 훅은 무엇입니까?

복습

리액트 라우터의 데이터 API는 렌더링 전에 데이터를 가져오는 데 로더를 사용하고, 변경을 처리하는 데 액션을 사용합니다. 컴포넌트는 useLoaderData()로 로더 데이터를, useActionData()로 액션 결과를, useNavigation()으로 탐색 상태를 읽습니다.

자주 묻는 질문

“로더와 동작(데이터 라우터 API)” 강의는 무료인가요?

네 — “로더와 동작(데이터 라우터 API)” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“로더와 동작(데이터 라우터 API)”에서 뭘 배우나요?

렌더링 전에 로더로 경로 데이터를 가져오고 동작으로 양식 제출을 처리합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“로더와 동작(데이터 라우터 API)” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기