패턴을 가져올 때 렌더링

우리가 성취하고자 하는 것은 무엇입니까?

구성 요소에는 렌더링할 데이터가 필요합니다. 즉, 구성 요소는 데이터에 바인딩됩니다. 물론 구성 요소가 로드되기 전이나 적어도 렌더링되기 전에 미리 데이터를 가져올 수 있습니다. 대부분의 개발자에게 물어보십시오. 실제로 다른 방법은 없다고 말할 것입니다. 실제로 바인딩할 데이터가 없으므로 시간을 낭비할 필요가 없습니다. 추가하겠습니다. 이 경우 데이터 부족으로 인해 렌더링할 기회가 없는 구성 요소를 미리 로드하는 이유는 무엇입니까? 즉, 데이터를 가져오는 동시에 구성 요소 코드를 로드하려고 합니다. 동적 코드 로딩(코드 분할)에 대한 아이디어가 일상적인 관행이 되지 않았다면 지금 수행해야 하는 몇 가지 이유는 here입니다.

React가 코드 분할을 구현하는 방법에 대한 자세한 내용은 생략하겠습니다. 이 주제에 대한 많은 자료가 웹에 있습니다. React.lazy() 및 React.Suspense 메커니즘에 대해 기억하는 것으로 충분합니다.

간단히 말해서 이 기술은 다음 발췌문에 설명되어 있습니다.

// App.js
import React, { lazy, Suspense } from 'react';
import { Routes, Route, Link } from 'react-router-dom';

const LazyComponent = React.lazy( () => import('./Resource') )
const App = () => {
   return <>
    <Link to={'/res'}>Resources</Link>
    <Routes>
      <Route path='res' element={
                                  <Suspense fallback={'Loading...'}
                                    <LazyComponent />
                                  </Suspense>
                                 }
   </Routes>
  </>
}

React.Suspense와 관련하여, 이 글을 쓰는 시점에 Suspense와 통합하는 방법을 알고 있는 알려진 라이브러리는 React Relay 및 SWR 두 개뿐입니다. 그렇다면 여기서 다룰 것은 이 두 가지입니다.

SWR을 사용한 구현

SWR은 Vercel(React.next 작성자)이 만들었고 HTTP RFC 5861을 기반으로 데이터 가져오기를 위한 정교한 캐시 지원을 제공합니다. 깔끔한 mutate() 함수를 추가하여 날짜를 가져오도록 합시다(간결성을 위해 네트워크 없이). )

// fetcher.js

const sleep = (ms) => {
 return new Promise(resolve, reject) {
   setTimeout(resolved, ms)
 }
}

export default async(url) => {
 await sleep(1000);
 return {url};
}

// App.js
import React, { lazy, Suspense } from 'react';
import { Routes, Route, Link } from 'react-router-dom';

+ import fetch from './fetcher'; 

const LazyComponent = React.lazy( () => import('./Resource') )
const App = () => {

+   const [shouldFetch, setShouldFetch] = React.useState(false);

+   useSWR(shouldFetch? key : null, fetch);

+   const handleClick = (event) => {
+        setShouldFetch(true);
+   }

   return <>
    <Link to={'/res'}
+          onClick={handleClick}
             >Resources</Link>
    <Routes>
      <Route path='res' element={
                                  <Suspense fallback={'Loading...'}
                                    <LazyComponent />
                                  </Suspense>
                                 }
   </Routes>
  </>
}

기본적으로 지연 구성 요소 로드와 병렬로 실행되는 onClick() 핸들러를 여기에 추가했습니다.
이 처리기 내에서 conditional fetching에 대한 플래그가 설정됩니다. 그 목적은 useSWR을 호출하고 반환된 결과를 전달된 키와 함께 캐시에 저장하는 것입니다. 당분간 우리는 이 결과를 사용하지 않고 캐시에 저장하기만 하지만 분명히 우리는 두 가지 작업(리소스 구성 요소 코드 로드 및 이에 대한 데이터 가져오기)을 비동기적으로 실행합니다.

이제 게으른 구성 요소가 useSWR에 대한 귀중한 호출로 이미 가져온 데이터를 사용하도록 하십시오. 구성 요소 내부에서 useSWR() 후크 하나를 다시 사용할 것입니다.

// Resource.jsx
const Resource () => {
  const { data } = useSWR('/res', fetcher);
}

React Relay로 구현

릴레이 끝점

우리가 성취하고자 하는 것은 무엇입니까?

const App = () => {
}