SWR
-
[React.js] React Query 에 대해 (feat. SWR 과의 차이) -v3FrontEnd/React.js 2022. 12. 30. 15:21
SWR, React Query 등장 이전 Redux, MobX 등의 상태 관리 라이브러리는 클라이언트 상태 관리에는 유용하지만, 서버 상태와 동기화 되지 않았기 때문에 개발자들이 직접 상태를 업데이트 해줬어야 함. => SWR과 React Query는 이러한 불편함을 해소하기 위해 등장 선언적으로 프로그래밍 가능 여러번 호출 된 동일한 API 요청은 한번만 실행 dirty해진 데이터는 적절한 시점에 알아서 업데이트 Global State 와 Server State의 관심사 분리 react-query가 swr을 앞지르고 있다. React query vs SWR React Query React Query는 리액트 에플리케이션에 서버 상태를 가져와서, 캐싱|동기화|업데이트를 쉽게 해준다 React Query ..
-
[Next.js] SWR을 통해 캐시 데이터 가져오기FrontEnd/Next.js 2022. 12. 12. 21:00
SWR란? HTTP 캐시 무효 전략인 State-While-Revalidate 에서 유래됨. SWR은 캐시로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화 된 데이터를 가져오는 전략 SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트를 경험할 수 있음. Next.js 팀에서 만들었다. 설치 yarn add swr // npm install swr 사용법 import useSWR from "swr"; const fetcher = (url:string)=>{ fetch(url).then(res=>res.json()) } const useUser = () => { const { data, error } = useSWR("/api/users/me",fetcher); r..