React) SWR

SWR이란
CSR(Client Side Rendering)측면에서 데이터 fetching 로직을 단순화하고 다양한 옵션을 통해 만들어주는 라이브러리

• SWR 데이터 캐싱
  -useSWR 훅을 사용하여 데이터 캐싱을 진행하는데, 한번 fetch한 원격상태의 데이터를 내부적으로 캐시한다.
  - 다른 컴포넌트에서 동일한 상태를 사용하고자 할 때, 이전에 캐시했던 상태를 그대로 리턴
  

Fetch 함수

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

• 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환
• API 호출 성공시 then으로 resolve 객체 리턴, 실패시 .catch로 reject 객체 리턴

JS의 동작 방식

• 싱글 스레드 방식으로 하나의 스레드에서 모든 걸 돌려야 한다. 즉, 어떤 동작이 수행하고 있을 때 그 동작이 수행 완료 될 때 까지 다른 로직을 수행하지 못하고 기다려야만 하는 동작 방식을 가졌다.
  -> 이러한 동기적인 JS의 동작 방식

이와 같이 React에서는 효율적인 데이터 fetching을 위해 라이브러리가 존재하는데,
주로 많이 사용되는 라이브러리가 SWR과 React-query이다.

React-query와 SWR의 차이

• SWR은 Global fetcher가 존재한다.

import { SWRConfig } from 'swr'

return (
	// 이런 식으로 fetcher함수와 원하는 옵션 플래그를 줄 수 있다.
	<SWRConfig
      value={{
        fetcher: customFetcher,
        revalidateIfStale: true,
        revalidateOnFocus: false,
        shouldRetryOnError: false,
      }}
    >
     {children}
    </SWRConfig>
)

이처럼 SWR은 간편한 config를 위한 provider가 제공된다.

• GarbageCollection 유무
  React-query는 안쓰는 쿼리 데이터나 state들을 검사해 자동으로 관리가 가능하다.
  (SWR은 관리가 안된다.)

SWR 사용 예시

//useSWR의 기본 구성
//fetcher: data를 fetch해 넘어온 Promise를 말한다.
const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)

import useSWR from 'swr'

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (isLoading) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

useSWR 훅은 key문자열과 fetcher함수를 받는다. (key는 주로 API URL이다.)
이 API URL이 fetcher함수로 전달이 된다. (이때, fetcher함수는 비동기 함수가 될 수 있다.)
useSWR훅은 2개의 값을 반환한다. (data, error)

//실제 내가 작성한 코드 swr.ts

import axios from 'axios';
import useSWR, { Key, Fetcher } from 'swr';
// const fetcher = (url: string) => fetch(url).then((r: any) => r.json());
// https://dummyjson.com/products/category/smartphones
// 'https://dummyjson.com/products/1'
const fetcher = async (url: string) =>
  await axios.get(url).then((res) => console.log(res.data));

export default function useSwrTest() {
  const { data, error } = useSWR(
    'https://dummyjson.com/products/category/smartphones',
    fetcher
  );

  return {
    product: data,
    isError: error,
  };
}



// SwrComponent.ts
import React from 'react';
import useSwrTest from './swr';

const SwrComponent = () => {
  const { product, isError } = useSwrTest();
  console.log(product, isError);
  //   return <div>swrComponent</div>;

  return <div>Swr 데이터</div>;
};

export default SwrComponent;

SWR을 공부하면서 코드를 작성 해 보았다. 비동기 fetcher함수를 만들었고. 이 함수는 데이터 조회기능을 하는 역할이다.

SWR 사용 후 느낀점

• 포커스 시 자동으로 갱신이 된다.
  -> 즉 화면을 클릭 하거나 접속 시 자동으로 데이터가 갱신 된다. (최신 상태로 즉시 동기화가 된다.)
  -> revalidateOnFocus옵션을 통해 비활성화 가능