[React] 고객으로부터 데이터를 신속하게 얻을 수 있는 SWR 사용 방법

이 문서에서는 클라이언트 데이터를 가져올 때 사용하는 설명서 SWR의 사용 방법에 대해 설명합니다.

SWR이란?

SWR은 데이터 추출에 사용되는 ReactHook 라이브러리 중 하나로 Stale-while-revalidate의 이름에서 유래했다.
이른바 Stale-while-revalidate는 캐시를 먼저 표시하고 서버에 캐시 업데이트를 요청하는 캐시 관리 방법이다.
업데이트된 캐시는 다음 같은 요청이 버려질 때 사용합니다.

캐시 표시

서버에 요청

데이터를 가져온 캐시 업데이트 데이터

표시
이stale-while-revalidate를 통해 데이터가 지속적으로 업데이트되고 데이터가 더 빨리 표시됩니다.

SWR 설치

먼저 설치가 필요합니다.객체의 항목에 다음 명령 중 하나를 입력합니다.yarn add swr npm install swr

SWR 사용

그럼 SWR을 실제로 사용해 보세요.다음 원본은 데이터를 가져올 때 데이터를 직접 표시합니다.

import useSWR from 'swr'

//fetcher関数の作成
const fetcher = url => fetch(url).then(r => r.json())

export default function index () {
  const { data, error } = useSWR('/api/user', fetcher)
  //エラー
  if (error) return <div>failed to load</div>
  //ロード中
  if (!data) return <div>loading...</div>
  //成功
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

usesWR 갈고리를 사용하여 데이터를 얻습니다.

유일한 식별 데이터에 사용되는 키

데이터의 비동기 함수를 되돌려주는fetcher

두 매개변수가 필요합니다.key는 URL을, fetcher는fetch 함수와 Axios를 지정합니다.이번에는fetch 함수를 통해 외부 데이터를 얻어 JSON 형식으로 전환할 뿐이다.
또한usesWR 갈고리의 반환값 데이터와 error의 2개를 반환합니다.이 두 데이터에 따르면 세 가지 요청 상태가 있다.

오류: error 값이 있는 경우

불러오는 중: error에 값이 없고 데이터에 값이 없는 경우

성공: 수치가 있는 경우

캐시를 이용한 간편한 쓰기

SWR을 사용할 수 있는 장점은 캐시를 이용해 요청 횟수를 줄이면서 코드를 간결하게 쓸 수 있다는 것이다.

일반 데이터 가져오기

예를 들어 전통적인 방법으로 데이터를 얻으려면 부모 구성 요소에서 얻은 데이터를 각 구성 요소에 전달해야 한다.
다음 원본은 부모 구성 요소가 처음 나타날 때useEffect를 통해 데이터를 가져오고 사용자 정보를 Avatar와Conntent에 전달합니다.

//ページ表示
export default function Index () {
  //ユーザー情報
  const [user, setUser] = useState(null)

  //初期表示時にデータフェッチ
  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data))
  }, [])

  //ロード中
  if (!user) return <p>Loading ...</p>

  //成功
  return <div>
    <Avatar user={user} />
    <Content user={user} />
  </div>
}

//コンテンツ
function Content ({ user }) {
  return <h1>ようこそ {user.name}さん</h1>
}

//アバター
function Avatar ({ user }) {
  const avatar_style = {
    borderRadius : "50%",
    width        : "50px",
  }

  return <img 
            src={user.avatar}
            alt={user.name}
            style={avatar_style}/>
}

SWR을 사용하여 데이터를 가져오는 방법

그러나 SWR을 사용하여 연결고리를 만들면 교부 매개 변수의 처리가 사라지고 부모 구성 요소와 서브 구성 요소의 의존 관계를 줄일 수 있다.

import useSWR from 'swr'

//フェッチ関数(JSON形式に変換)
const fetcher = url => fetch(url).then(r => r.json())

//ユーザー情報の取得
function useUser () {
  const { data, error } = useSWR(`/api/user`, fetcher)
  return {
    user: data,
    isLoading: !error && !data,
    isError: error
  }
}

//ページ表示
export default function Index () {

  return (
    <div>
      <Avatar />
      <Content/>
    </div>
  )
}

//コンテンツ
function Content () {
  const { user, isLoading } = useUser();    //ユーザー情報の取得
  if (isLoading) return <p>Loading ...</p>  //ロード中
  return <h1>ようこそ {user.name}さん</h1>   
}

//アバター
function Avatar () {
  const avatar_style = {
    borderRadius : "50%",
    width        : "50px",
  };

  
  const { user, isLoading } = useUser()     //ユーザー情報の取得
  if (isLoading) return <p>Loading ...</p>  //ロード中

  return <img 
            src={user.avatar}
            alt={user.name}
            style={avatar_style}/>
}

각 데이터가 필요한 경우useser 연결을 이용하여 모부품은 불필요한 데이터(user)를 저장할 필요가 없다.
이렇게 되면 각자 독립된 구성 요소가 되어 유지보수성을 높일 수 있다.

클릭 횟수 한 번에 완성

하지만 이 소스를 보고 많은 사람들이 걱정하는 것은 주문 횟수죠.이전의 방법은useEffect에서 한 번 호출을 통해 데이터를 얻었지만 SWR에서는 두 번 호출되었다.
사실 이 경우에도 SWR을 사용하면 한 번의 요청을 해결할 수 있다.usesWR은 같은 키(URL)를 지정하기 때문에 자동으로 캐시합니다.
이렇게 SWR을 사용하면 불필요한 요구를 줄이고 코드를 간단하게 쓸 수 있다.

참고 자료

https://swr.vercel.app/
https://engineering.mercari.com/blog/entry/2019-12-17-130000/
https://web.dev/stale-while-revalidate/