리믹스 및 데이터 로드

이제 첫 번째Remix Project를 시작했으므로 더 대화식으로 만드는 방법을 살펴보겠습니다.

이 기사에서는 지금까지 정적 Remix 웹 사이트에 로드 데이터를 추가합니다.

데이터를 로드한다는 것은 즉석에서 생성되고 결국 외부 소스에 의해 구동될 수 있는 페이지를 말하는 것입니다.

게시물 페이지 만들기

이 문서에 대해 가지고 있는 모든 게시물로 게시물 개요를 만들고자 합니다.
각 항목을 클릭하는 동안 단일 페이지로 이동할 수 있어야 합니다.

이것과 비슷한 것:

게시물/

포스트/포스트-1

포스트/포스트-2

이 동적 게시물 개요 페이지를 생성하여 시작하겠습니다.

개요 페이지 만들기

단일, 다중posts 기반 페이지를 생성합니다. routes라는 폴더에 posts라는 디렉토리를 만들어 봅시다.

이 폴더 안에 index.tsx 파일을 만듭니다. 이것은 우리의 개요 페이지 역할을 할 것입니다.
useLoaderData 후크를 활용하여 게시물을 로드하고 경로 로더에 대한 JSON 구문 분석 데이터를 반환하는 데 사용할 수 있습니다.

먼저 게시물 개체를 정의하고 필요한 모든 가져오기를 로드하려고 합니다.

import { json } from '@remix-run/node';
import { Link, useLoaderData } from '@remix-run/react';

export const loader = async () => {
  return json({
    posts: [
      {
        slug: 'post-1',
        title: 'My First Post',
      },
      {
        slug: 'post-2',
        title: 'The second post I ever made',
      },
    ],
  });
};

그런 다음 실제 렌더링된 요소를 다음과 같이 내보낼 수 있습니다.

export default function Posts() {
  const { posts } = useLoaderData();
  return (
    <main>
      <h1>All my posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link to={post.slug} className='text-blue-600 underline'>
              {post.title}
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

이제 npm run dev,로 프로젝트를 실행하면 모든 게시물을 볼 수 있고 게시물을 클릭할 수도 있습니다.



멋진!

그러나 계속하기 전에 이 게시물 배열을 리팩터링하여 단일 페이지에 대해 다시 사용하고 싶기 때문에 어딘가에 정의하도록 합시다.

Remix는 models 폴더에 있는 모델을 사용할 것을 권장합니다.
이 폴더에 post.server.ts 파일을 추가해 보겠습니다.

type Post = {
  slug: string,
  title: string,
};

export async function getPosts(): Promise<Array<Post>> {
  return [
    {
      slug: 'post-1',
      title: 'My First Post',
    },
    {
      slug: 'post-2',
      title: 'The second post I ever made',
    },
  ];
}

또한 Remix는 TypeScript를 좋아하므로 이 게시물의 유형을 반영하도록 업그레이드했습니다.

그런 다음 pages/posts/index.tsx로 돌아가서 다음과 같이 로더를 변경할 수 있습니다.

type LoaderData = {
  posts: Awaited<ReturnType<typeof getPosts>>,
};

export const loader = async () => {
  return (
    json <
    LoaderData >
    {
      posts: await getPosts(),
    }
  );
};

그리고 이러한 유형을 정의하여 입력을 반영하도록 렌더링을 수정할 수도 있습니다.

export default function Posts() {
  const { posts } = useLoaderData() as LoaderData;
  ...
}

완벽하고, 리믹스가 행복하고, TypeScript가 만족합니다.

오늘 완성된 코드는 GitHub에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나