분류 Reactjs

원격 데이터 가져 오기를 위한 React Hooks 라이브러리

컨텐츠 정보

  • 조회 311 (작성일 )

본문

SWR은 원격 데이터 가져 오기를 위한 React Hooks 라이브러리입니다.


https://github.com/vercel/swr


https://swr.vercel.app/


import useSWR from 'swr'

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

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

이 예제에서 React Hook useSWR은 키와 가져 오기 함수를 받습니다. 키는 요청의 고유 식별자이며 일반적으로 API의 URL입니다. 그리고 가져 오기 프로그램은 키를 매개 변수로 받아들이고 데이터를 비동기 적으로 반환합니다.


useSWR은 데이터와 오류라는 두 가지 값도 반환합니다. 요청 (페처)이 아직 완료되지 않은 경우 데이터가 정의되지 않습니다. 그리고 응답을 받으면 fetcher의 결과에 따라 데이터와 오류를 설정하고 구성 요소를 다시 렌더링합니다.