swr

useSWR로 API 호출 재사용성 높이기

SWR란? React-Query와 비슷한 개념으로 서버에서 데이터를 가져와서 사용하는 Vercel이 개발한 React hooks이다. 더 자세한 개념이랑 사용 방법은 전 글을 참고하자 https://voyage-dev.tistory.com/158 이번에는 SWR hooks로 데이터를 프리렌더링 하며 axios를 이용해 호출 재사용성 높이는 방법을 알아보자. useSWR 함수 SWR 함수는 기본적으로 1개의 인자를 필수로 받는다. key : fetcher 함수에게 전달되는 인자 ⇒ 보통 URL을 넣는다 fetcher : 데이터를 실질적으로 fetch하는 함수이다 option : revalidate , mutate, initialData 등 옵션을 넣어줄 수 있다 사용 순서는 다음과 같다. fetcher를 ..

useSWR vs React(TanStack) Query를 비교해보자

원문 : https://codedamn.com/news/javascript/useswr-vs-react-query-differences-and-which-one-should-you-choose https://blog.logrocket.com/swr-vs-tanstack-query-react/ https://tech.madup.com/react-query-vs-swr/ https://sihyungyou.github.io/iOS-race-condition-in-swift/ 많은 라이브러리를 통해 React에서 데이터를 가져올 수 있지만 현재 가장 인기 있는 두 가지는 바로 SWR / Tanstack React Query이다. 이 두 라이브러리는 얼핏 비슷해 보일 수 있지만 몇 가지 중요한 차이점이 있다. u..

API를 호출할 때 useState 대신 useSWR을 사용해야 하는 이유

원문 : https://javascript.plainenglish.io/why-you-should-use-useswr-instead-of-usestate-when-calling-apis-8b6de5dc18fc https://velog.io/@ysg81/React-useSwr-사용하기 https://github.com/vercel/swr https://swr.vercel.app/ko/docs/revalidation SWR이란 무엇인가? SWR(State While Revalidate)은 서버에서 데이터를 가져오는 데 사용되는 React 후크이다. useState와 useEffect를 사용하지 않고 실시간 데이터를 fetch, 캐싱 또는 re-fetch 할 수 있다. SWR은 캐시에서 데이터를 제공한 다음 ..