SWR

# What?

spa인거 좋으나 매번 페이지 접속때마다 api 요청을 새로 해주니, 오히려 mpa보다 사용감이 떨어져보일 때가 있음.

mpa처럼 캐싱처리 알아서 잘 해주게 도와주는 라이브러리가 swr임.

 

# How?

1) SWRConfig로 swr를 사용할 페이지 컴포넌트들을 감싸주기

<SWRConfig value={{
  fetcher: (url) => axios(url).then(response => response.data) 
  // 이렇게 해두면 useSWR에 url만 써줘도 response.data값이 return됨.(전역 fetcher 설정)
}}>
   <Switch>
        <Redirect exact path="/" to={"/groups"}/>
        <AuthRoute exact path="/test" component={Test}/>
   </Switch>
</SWRConfig>

2) useSWR로 초기 데이터 가져오기(useEffect안에 넣으면 안됨)

let {data: items, mutate: mutateItems} = useSWR(`/api/stores?page=${params.page}&group_id=${params.group_id}`);
// state, setState랑 비슷

* useSWR([URL, 넘겨주는 데이터 자리]); // 넘겨주는 데이터 자리에 state만 넣어야돼 안그럼 오류나

 

3) mutate로 crud 시 데이터 변경하기

    const onMenuCreated = (response) => {
        mutateStore({...store, menus: [...store.menus, response.data]}, false); 
        // false 옵션을 주면 revalidate 할 필요 없이 바로 데이터 수정
    };