SWR? Redux 대신 전역상태 관리까지

개인 프로젝트를 하면서 Redux를 사용해 상태 관리, Redux-saga를 사용해 비동기를 관리하던 도중

SWR을 알게 된 후 너무나 편리해 느낀 점을 적습니다.

 

 

우선 내가 Redux로 상태 관리를 하면서 느낀 불편한 점은

• 상태와 변이 방법을 정의하기 위한 리듀서와 액션의 코딩량이 많다.
• 지속적으로 로컬 스토어 상태를 원격 서버 상태와 동기화해야 하는 추가 작업이 필요하다.

거기에 최근 배우는 TypeScript까지 적용하잖이 코드가 너무 길 것 같은 느낌이다.

 

그럼 이제 SWR이 무엇인지 알아보자.

 

SWR이란?

 

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

 

SWR의 기본 코드는 이러하다.

import useSWR from 'swr'

const  fetch = (url)=>axios.get(url).then((response)=>response.data)

function Profile () {
  const { data, error } = useSWR('/api/user', fetch)
if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

 

1. useSWR 은 첫 번째 인자로 원격 상태에 대한 key를, 두 번째 인자로 데이터 fetch 함수를 받는다.

2. 첫 번째 인자는 두 번째 fetch 함수의 첫 번째 인자로 전달된다.

3. fetch 함수가 데이터를 로드하면 해당 응답이 data로 세팅되고 오류 발생 시 해당 오류가 error에 세팅된다.

4. 컴포넌트에선 data와 error의 상태에 맞게 렌더링 해주면 된다.

 

여기서 장점은 useSWR 은 한번 fetch 한 원격 상태의 데이터를 내부적으로 캐시 하고 다른 컴포넌트에서 동일한 상태를 사용하고자 할 경우 이전에 캐시 했던 상태를 그대로 리턴해 주기 때문에 서로 다른 컴포넌트가 동일한 상태를 공유할 수 있다는 점이다.

 

여기서 SWR은 항상 데이터를 새로 fetch 하는 건 아니다. 

•  SWR 은 브라우저 창이 focus를 얻을 때 또는 네트워크가 offline에서 online으로 바뀔 때 자동으로 데이터를 fetch 한다.
• fetch 주기는 dedupingInterval 속성으로 커스터마이징 가능하다. default 값은 2초이다. 이 시간 동안에 새로 데이터를 요청할 경우 캐시 된 데이터를 보내준다.

dedupingInterval << 몇 초마다 재요청이 아니고 캐시 지속 시간이다. 그럼 지속시간 동안 아무리 호출해도 서버에는 1번만 요청하고 나머지는 캐싱된 데이터를 가져오겠다. 

 

그럼 데이터 수정 즉시 변화를 새로 fetch 할 순 없나? 아니다.

 

이럴 경우에는 mutate 함수를 이용할 수 있다. mutate 함수가 호출되면 해당 상태를 즉시 다시 fetch 하고 데이터를 갱신한다. mutate 함수를 사용할 때 데이터 fetch 없이 로컬의 캐시 되어있던 상태만 갱신하는 것도 가능하다. 

mutate(data,false) // 첫번째 인자론 갱신할 데이터 두번째 인자로는 데이터 fetch 여부를 받는다

 

또 revalidate( ) 함수를 이용할 수도 있다. 이건 서버에 새로 fetch 요청을 한다.

 

revalidate 단점 서버에 요청 1번 더 보내는 것. 비효율 적임 
mutate - 서버에 요청 x 데이터 수정, 두 번째 인자로 데이터 fetch 여부 받음.

 

mutate 서버에 요청이 가기도 전에 액션을 바로 하고 sholdRevalidate는 액션 먼저 하니 서버 점검을 해주는 것

이것을 OPTIMISTIX UI 하고 싶으면 2번째 인자 sholdRevailidate : true로 

 

*같은 주소로 두 가지 fetch요청을 하고 싶을 때는 useSWR 키값에 주소 뒤에 #123 이런 식으로 요청하면 다르게 저장된다 #뒤부턴 무시되기 때문 

---

무조건 로컬 상태만 관리하는 것도 가능하다.

 

굳이 useSWR 첫 번째 인자가 주소일 필요 없고 이렇게 전역 상태도 관리할 수 있다.

비동기 요청에서만 활용하지 않고

fetch 함수를 다양하게 해서 앞으로 무궁무진하게 활용할 수 있을 거 같다.

A 컴포넌트
const {data} = useSWR('HI',(key)=>{localStorage.setItem('data',key) return localStorage.getItem('data')})

B 컴포넌트
cosnt {data} = useSWR('HI')

이 부분은 정식 릴리즈 되진 않았지만 react-query에서는 정식 릴리즈가 되어있다.

개인적인 견해로는 앞으로 redux를 대체하지 않을까 싶다.

react-query.tanstack.com/overview

Overview

 

 

참고 링크