공유 레이아웃 리믹스, 첫 모습

Remix의 매우 멋진 측면 중 하나는 여러 레이아웃과 하위 레이아웃까지 지원할 수 있다는 것입니다.

이것이 무엇을 의미하는지 살펴보겠습니다.
기본 본질은 앱의 래퍼가 될 수 있는 특정 콘센트(거의 React 자식과 유사)를 지원할 수 있다는 것입니다.

대충:

앱

앱 -> 관리자

앱 -> 관리자 -> 게시물

앱 -> 관리자 -> 게시물 -> 신규

그리고 이들은 모두 최상위 수준에서 작동하므로 디자인하고 앱에 추가하는 모든 항목은 관리자에서 사용할 수 있습니다.
관리자에 추가된 모든 항목은 게시물 등에서 사용할 수 있습니다.

이 개념은 새로운 것은 아니지만 재사용 가능한 요소를 만드는 데 매우 강력합니다.

Remix에 첫 번째 라우터 콘센트 추가

이를 반영하기 위해 우리created yesterday를 변경합시다.
공유 템플릿을 통해 작동하도록 관리자 게시물 섹션을 변경할 수 있습니다.

우리는 다음과 같이 디자인하고 싶습니다.
[sidebar][outlet]
사이드바는 게시물 관리 부분이고 콘센트는 상세 페이지(새 게시물 양식)입니다.

가장 먼저 추가할 것은 admin.tsx 폴더에 있는 posts라는 파일입니다.
이 파일은 관리 후 패널의 기본 래핑 템플릿 역할을 합니다.

Note: There are multiple design solutions here. This is one of them (You could also create a global admin folder, which might be better for your app)

이 관리 파일에서 위에서 설명한 대로 레이아웃을 반환하려고 합니다.

export default function PostAdmin() {
  return (
    <div className='mx-auto max-w-4xl'>
      <h1 className='my-6 mb-2 border-b-2 text-center text-3xl'>
        My super cool admin
      </h1>
      <div className='grid grid-cols-4 gap-6'>
        <nav className='col-span-4 md:col-span-1'>Sidebar</nav>
        <main className='col-span-4 md:col-span-3'>Main section</main>
      </div>
    </div>
  );
}

그러나 이것은 여전히 ​​많은 일을하지 않습니다. 빠른 탐색 방법을 갖도록 항상 사이드바에 게시물을 추가합시다.

우리는 같은 loader we previously created을 사용할 수 있습니다.

import { json } from "@remix-run/node";
import { Link, useLoaderData } from "@remix-run/react";
import { getPosts } from "~/models/post.server";
import { LoaderFunction } from "@remix-run/node";

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

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

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

  return (
    <div className="mx-auto max-w-4xl">
      <h1 className="my-6 mb-2 border-b-2 text-center text-3xl">
        My super cool admin
      </h1>
      <div className="grid grid-cols-4 gap-6">
        <nav className="col-span-4 md:col-span-1">
          <ul>
            {posts.map((post) => (
              <li key={post.slug}>
                <Link
                  to={`/posts/${post.slug}`}
                  className="text-blue-600 underline"
                >
                  {post.title}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
        <!-- Other code -->
      </div>
    </div>
  );
}

앱을 스풀업하고 /posts/admin 링크를 방문할 수 있습니다.

이미 꽤 멋지다.

이제 이 레이아웃 위에 자세한 화면을 제공할 수 있도록 라우터 콘센트를 추가해 보겠습니다.

import {Outlet, [...others] } from "@remix-run/react";

export default function PostAdmin() {
  return (
    <div className="mx-auto max-w-4xl">
      <div className="grid grid-cols-4 gap-6">
        <!-- other stuff -->
        <main className="col-span-4 md:col-span-3">
          <Outlet />
        </main>
      </div>
    </div>
  );
}

이 경로 다음에 정의하는 모든 항목은 <Outlet> 부분에 있습니다.

예를 들어 admin 폴더 안에 posts라는 새 폴더를 만들어 보겠습니다.
거기에서 기본 시작 페이지를 렌더링할 index.tsx 파일을 만듭니다.

import { Link } from '@remix-run/react';

export default function AdminIndex() {
  return (
    <p>
      <Link to='new' className='text-blue-600 underline'>
        Create a New Post
      </Link>
    </p>
  );
}

new 형식에 대한 링크만 표시하므로 색인은 매우 간단합니다.

그러면 다음 출력이 렌더링됩니다.



이 콘센트가 기본 페이지를 덮어쓸 수 있는 방법은 매우 멋집니다.

이제 new.tsx 파일을 이 admin 폴더로 옮기고 변경 사항을 살펴보겠습니다.



더 좋은 점은 새 게시물을 추가하면 사이드바에서 바로 볼 수 있다는 것입니다!

GitHub에서 전체 코드를 찾을 수 있습니다.

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

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