useSWR

SWR(State While Revalidate)은 서버에서 데이터를 가져오는 데 사용되는 React 후크이다. useState와 useEffect를 사용하지 않고 실시간 데이터를 fetch, 캐싱 또는 re-fetch 할 수 있다. SWR은 캐시에서 데이터를 제공한 다음 검증을 위해 서버를 만들고 일단 완료되면 데이터 일관성을 위해 데이터를 결합한다.

예시

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function SalesPage() {
  const { data, error, isLoading } = useSWR(
    'fetch data',
    fetcher
  );

  if (error) return <div>Failed to load sales data.</div>;
  if (isLoading) return <div>Loading sales data...</div>;

  return (
    <ul>
      {data.map((sale) => (
        <li key={sale.id}>
          {sale.username} - {sale.volume}
        </li>
      ))}
    </ul>
  );
}

useSWR은 내부적으로 상태 관리를 하기 때문에 useEffect와 같이 쓸 시 데이터가 변경되거나 새로 패칭되면 컴포넌트를 다시 렌더링한다.

  const { data, error } = useSWR(
    'fetch data',
    (url) => fetch(url).then((res) => res.json()),
  );

  useEffect(() => {
    if (data) {
      const transformedSales = [];
      for (const key in data) {
        transformedSales.push({
          id: key,
          username: data[key].username,
          volume: data[key].volume,
        });
      }
      setSales(transformedSales);
    }
  }, [data]);