React Remix 신상 React framework 간단하게 살펴보기

Remix - Build Better Websites

Remix - Build Better Websites

Why I Love Remix (kentcdodds.com)

Why I Love Remix

https://itchallenger.tistory.com/m/481

React Remix Framework로 알아보는 중첩 경로(nested routing)

리액트 계의 유명한 구루인 kentcdodds가 힙스터스러운 해당 프레임워크로 약을 팔고 있다.
한 마디로 요약하면 해당 프레임워크는 "리액트와 nodejs를 사용하는, UI에 집중한 (jsp|php)"다.
개발블로그와 농담홈페이지 튜토리얼이 있던데, tailwindCSS를 학습하면서 번역 및 요약해 둘 계획.

이글 조회수가 잘나와서 시리즈글을 헐레벌떡 추가했다. 그 동안 CSS랑 함수형 프로그래밍 공부, 이직준비 하느라 시리즈 추가를 안하고 있었긴 했다만...

[React][Remix][tutorial]React-Remix를 이용하여 개발자 블로그 만들기. (tistory.com)

[React][Remix][tutorial]React-Remix를 이용하여 개발자 블로그 만들기.

메인페이지 번역 요약

TLDR:
라우터 별로 아래 5개의 핵심 컨셉을 통해 앱을 개발한다.

• 상태관리 : form 객체 사용
• 로딩상태(for css transition. 절대 data fetch 로딩 상태 아님!) : useTransition
• 구현
  • 에러 바운더리
  • 컴포넌트
  • form action

suspense를 디폴트로 사용함.
state 사용을 거의 다 제거 할수 있음 (이게 대박인듯 한데 튜토리얼을 봐야겠음.)

Remix는 정적 사이트 생성(SSG)을 제공하지 않음.

페이지 로딩 속도는 좋은 앱을 구성하는 요소의 일부일 뿐임.
대신 코드 스플리팅 및 비동기 렌더링으로 어느 정도 속도의 단점을 극복하며, 더 나은 UX에 집중한다 함.

Remix의 핵심은 Nested Routes임

url path의 depth로 view를 구분하고, 해당 부분들을 비동기적으로 동시에 fetch,
각각 에러바운더리와 서스펜스를 적용함.

네비게이션은 레벨이 있다.

컴포넌트는 URL과 밀접한 관계가 있음.

url의 path는 또한 데이터 로딩 및 코드 분할의 의미론적 경계

url의 path는 또한 데이터 로딩 및 코드 분할의 의미론적 경계 2

Nested Routes를 통해 Remix는 거의 모든 로딩 상태를 제거함

대부분의 웹 앱은 컴포넌트 내부에서 fetch해 요청 폭포수, 느린 로딩 속도 및 버벅거림을 만듬.

Remix는 서버에서 데이터를 병렬로 로드하고 완전한 형식의(SSR) HTML 문서를 보냄. 훨씬 더 빠르고 버벅거림이 없음.

요청 폭포수 vs 병렬 데이터 로드(서스펜스 덕택이겠지)

 자동으로 eager loading 구현 (link prefetch 사용)

데이터 조작 코드 제거

stateless react

export async function action({ request }) {
  const body = await request.formData();
  const invoice = await createInvoice(body);
  return redirect(`/invoices/${invoice.id}`);
}

export default function NewInvoice() {
  return (
    <Form method="post">
      <input type="text" name="company" />
      <input type="text" name="amount" />
      <button type="submit">Create</button>
    </Form>
  );
}

로딩 상태가 필요하면 서버에 요청

export default function NewInvoice() {
  const { submission } = useTransition();
  return submission ? (
    <Invoice
      invoice={Object.fromEntries(
        submission.formData
      )}
    />
  ) : (
    <Form method="post">
      <input type="text" name="company" />
      <input type="text" name="amount" />
      <button type="submit">
        Create invoice
      </button>
    </Form>
  );
}

에러바운더리

즉, 라우터 별로, 폼 액션, 에러 바운더리, 컴포넌트 이 세 가지를 배치하면 되는듯
그리고 에러바운더리가 있으면, 내부에서 가장 가까운 에러바운더리를 만나 에러처리를 view에 반영

export default function InvoiceRoute() {
  const invoice = useLoaderData();
  return <Invoice data={invoice} />;
}

export function ErrorBoundary({ error }) {
  console.error(error);
  return (
    <div>
      <h2>Oh snap!</h2>
      <p>
        There was a problem loading this invoice
      </p>
    </div>
  );
}

에러바운더리

버블링도 가능