SWR 과 axios 같이 사용하기

1. SWR : 공식 문서 링크 참고

SWR: React Hooks for Data Fetching

 

짤막하게 정리하자면 SWR은 나뉘어져 있던 상태 관리 관련 기능을 하나로 묶게 해주는 Hook 이다. 나는 Context 와 Axios 를 바탕으로 상태를 관리하고 있었는데, 상태가 바뀔 때 마다 수동으로 context update 를 해주는 게 맞는가 싶은 생각이 들어 SWR 사용을 고려하게 되었다.

- 장점: 어떻게인지는 모르지만... swr 을 사용하면 useEffect 를 사용하지 않고도 데이터 갱신이 자동으로(우리가 원하는 수준으로 갱신이) 이뤄진다. React 와 React Native 사용 과정에서 코드 작성을 더욱 편하게 해줄 것이라 판단했다.

- 캐시된 데이터를 이용하기 때문에, context 에 데이터를 넣지 않고도 넣은 것처럼 이용할 수 있다. (axios 동작이 끝나고 새 데이터를 가져와도 그 전까지는 이전에 캐싱된 데이터를 이용하기 때문에 화면이 망가지지 않는다.)

- 차이를 코드로 보고 싶다면 다음 Example 참고: https://swr.vercel.app/getting-started#example

 

2. Axios 와 함께 사용하기

- 대부분의 예제가 fetch 를 기반으로 작성되어 있었다. 그래서 처음에 axios 어떻게 쓰나 생각했는데, 문서와 검색을 통해 전혀 걱정할 필요가 없다는 사실을 깨달았다.

 

SWR은 두 가지 인자를 바탕으로 동작한다. (다른 인자도 있지만 기본적으로는 이렇게 두 개)

1. key: 고유한 key 역할을 함과 동시에 fetcher의 인자로 들어간다.

2. fetcher: 실제로 동작하는 함수. (Fetch, Axios, GraphQL 등...)

import axios from "axios"
import useSWR from "swr"

const fetcher = url => axios.get(url).then(res => res.data)

function App() {
	const key = '/api/data';
	const { data, error } = useSWR('key', fetcher)
    // fetcher의 인수로 key 가 들어간다.
    // data 는 res.data, error 도 fetcher 의 error 가 들어간다.
  	//...
  }

관련하여 swr 공식문서의 다음을 참고하도록 하자.

https://swr.vercel.app/docs/data-fetching#axios

 

3. 나가며

이 글은 swr 에 axios 를 어떻게 쓸 수 있는지를 정리한 내용이다. 그래서 딱 여기까지만 쓰는데, swr 이 제공하는 기능은 이보다 훨씬 많다. Mutation 도 봐야하고, Pagination 도 자세히 봐야한다. (기존의 useEffect 보다 훨씬 깔끔하게 해 준다.) Next.js 에서의 용례 또한 SWR 공식 문서가 제공하고 있다.

개인적으로 Context 쓰면서도 꽤나 고통받고 있었어서, SWR을 배우면 context 없이 더 효율적으로 쓸 수 있다는 게 마음에 들었다. (배울 게 더 적기도 하고...) get을 빼면 axios 사용은 Press 나 Submit 에서나 쓰기 때문에, SWR + axios 만으로도 데이터와 관련된 부분은 다 할 수 있지 않을까 그런 생각을 하게 된다.

 

4. 기타 참고

1) useSWR 의 기타 메소드는 여기서 자세히 소개해주고 있다.

[React, Next.js] - useSWR Hook 알아보기!

2) 적어도 get 에 관련해서는 로컬 상태와 원격상태 관리의 통합이 가능하다는 것을 보여주는 글.

Redux 를 넘어 SWR 로(2)

3) swr을 사용해 커스텀훅을 만드는 예제. (나에게는 꽤 어려워서 느낌만 가져가라는 의미로 공유)

SWR을 사용한 useRequest, 리엑트 Data Fetching – dohoons(도훈) _(≥∇≤)ノミ☆