React 18에서 Suspense와 함께 SWR 후크 사용

제가 이 글을 쓰는 이유 중 하나는 최근에 배운 새로운 개념에 대한 지식을 강화하면서 개발자로서 해야 할 일상적인 작업에 적용하려고 노력하기 위해서입니다.
그리고 개발자로서 수행하는 가장 일반적인 작업 중 하나는 API에서 일부 데이터를 가져와서 클라이언트에 제공하는 것입니다.

그리고 나는 이미 과거에 ""로 그것에 대해 썼고 얼마 전 같은 주제에 대해 ""를 출판했습니다.

그러나 후자의 기사는 React 18의 새로운Suspense 구성 요소를 사용하기 위해 가져오는 라이브러리 주위에 래퍼를 작성하는 매우 수동적인 접근 방식을 사용하고 있었지만 이것이 유일한 방법은 아니며 블록에 다음을 수행할 수 있는 새로운 도구가 있습니다. 동일한 작업 방식이 더 간단하고 사용하기 쉽습니다: SWR .

그러나 SWR은 무엇입니까?

프로젝트 자신의 말에서:

The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861. SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.

그것은 확실히 데이터 가져오기 라이브러리가 아니며, 내가 말한 래퍼와 동일한 작업을 수행하고 간단한 후크를 사용하여 가져오기 프로세스를 단순화하고 반응 기능 구성 요소에서 처리하는 방법을 허용합니다.

그러나 그 위에 캐시도 하므로 동일한 엔드포인트를 여러 번 요청하는 경우 내부 캐시에 이미 필요한 데이터가 있는지(그리고 여전히 유효한지) 확인하여 애플리케이션의 전반적인 성능을 향상시킵니다.

우리의 코드를 리팩토링하자

패키지 설치

평소와 같이 가장 먼저 할 일은 설치하는 것이므로 다음과 같이 하십시오.

npm install swr --save

출발점

따라서 이전에는 다음과 같은 구성 요소와 라이브러리가 있었습니다.

가져오기 약속이 해결되지 않아 pending 상태이거나 거부되었을 때 예외가 발생하는 가져오기 라이브러리의 래퍼입니다.
Example here .

데이터를 가져오기 위해 API를 호출하는 데 axios를 사용하고 위의 함수로 래핑된 래핑된 가져오기 로직. Example here

데이터를 가져오기 위해 함수를 호출하고 이를 사용하여 코드를 렌더링하는 하위 구성 요소입니다.

대체 구성 요소와 함께 Suspense를 사용하는 상위 구성 요소는 가져오기 약속이 확인될 때까지 표시되며 완료되면 하위 구성 요소가 대신 렌더링됩니다. Example here .

무엇을 바꿔야 할까요?

따라서 래퍼와 래핑된 함수는 갈 수 있으며 더 이상 필요하지 않습니다.

모든 것이 하위 구성 요소에서 발생하므로 상위 구성 요소는 변경되지 않습니다.

실제 작업은 자식 구성 요소를 리팩터링하는 것이며 현재 코드는 다음과 같습니다.

import React from 'react';
import fetchData from '../../api/fetchData.js';

const resource = fetchData('/sample.json');

const Names = () => {
  const namesList = resource.read();

  return (
    <div>
      <h2>List of names</h2>
      <p>This component will use a custom handler for fetching data.</p>
      <ul>
        {namesList.map(item => (
          <li key={item.id}>
            {item.name}
          </li>))}
      </ul>
    </div>
  );
};

export default Names;

우리가 말했듯이 이전 가져오기 논리를 제거할 수 있으므로 이 가져오기 줄을 swr 및 axios 가져오기로 바꿀 수 있습니다.

// from this
import fetchData from '../../api/fetchData.js';

// to this
import useSWR from 'swr';
import axios from 'axios';

이제 데이터를 가져오기 위해 여전히 axios를 사용해야 하며 이는 이전에 가지고 있던 resource 객체를 대체합니다.

// from this
const resource = fetchData('/sample.json');

// to this
const fetcher = url => axios.get(url).then(({data}) => data);

여기서는 axios 를 사용하고 있지만 어떤 라이브러리를 사용할지는 여러분에게 달려 있습니다. 읽고자 하는 데이터와 함께 약속을 반환하는 한 원하는 가져오기 라이브러리를 사용할 수 있습니다.

지금까지 이 모든 작업은 구성 요소 코드 외부에서 발생했으며 이전 논리에서는 다음과 같이 read() 개체에서 resource 메서드를 호출했습니다.

const Names = () => {
  const namesList = resource.read();

이제 대신 useSWR 후크를 사용해야 하지만 문제가 있습니다.

const Names = () => {
  const { data: namesList } = useSWR(
    '/sample.json',
    fetcher,
    { suspense: true}
  );

일부 사용자는 "왜 URL을 가져오기 콜백 함수에 직접 전달할 수 있습니까?"라고 궁금해할 수 있습니다. 그 이유는 SWR이 해당 키를 캐시 키로 사용하므로 다음에 동일한 엔드포인트를 호출하면 캐시된 값을 반환하기 때문입니다.
그리고 그게 다야! 나머지 코드는 동일합니다!
따라서 최종 자식 구성 요소 코드는 다음과 같습니다.

import React from 'react';
import useSWR from 'swr';
import axios from 'axios';

const fetcher = url => axios.get(url).then(({data}) => data);

const Names = () => {
  const { data: namesList } = useSWR('/sample.json', fetcher, { suspense: true});

  return (
    <div>
      <h2>List of names with SWR</h2>
      <p>This component will use the SWR hook for fetching data.</p>
      <ul>
        {namesList.map(item => (
          <li key={item.id}>
            {item.name}
          </li>))}
      </ul>
    </div>
  );
};

export default Names;

자식 구성 요소에서 모든 일이 발생하므로 부모 구성 요소는 여전히 변경되지 않지만 모든 것이 suspense 로 래핑되는 방식을 확인하려는 경우 코드는 다음과 같습니다.

import React, { Suspense } from 'react';
import Names from './Names';
import Loading from '../Loading';

const Home = () => (
  <div>
    <h1>Best devs:</h1>
    <Suspense fallback={<Loading />}>
      <Names />
    </Suspense>
  </div>
);

export default Home;

이 기사가 React 18의 새로운Suspense 구성 요소와 함께 SWR을 사용하는 방법을 이해하는 데 도움이 되었기를 바랍니다 ;-)