[상태관리] SWR 에 대하여

(서론)

두번째 프로젝트: https://fineaple.com 

Fineapple 능력사무소

사람들의 동네에서 소소한 재능을 나눌수 있는 커뮤니티 페이지를 만들었다. 

커뮤니티 웹페이지의 특성상 페이지 구조가 간단할꺼라고 생각했고 굳이 전역에서 상태관리를 하지 않아도 문제될게 없을꺼같아서

상태관리 도구없이 단방향 데이터흐름으로 구성하였다.

 

하지만 프로젝트를 하다보니 전역공간에서 데이터를 관리하는것의 장점들을 너무 뼈저리게 느꼇다.

 

1.  페이지가 간단하다고 해서 컴포넌트구조도 간단한건 아니였다.

2.  렌더링에 필요한 데이터 외에도 로그인상태를 통해서 얻을수 있는정보들은 전역에서 관리해주면편하다.

3.  협업시에 전역상태관리를 안하면 많은 파일을 만지게 되고 이는 컨플릭트 유발 가능성을 더 염두해야한다.

 

크게 3가지 정도 상태관리를 사용안해서 느낀 불편함 이였다.

 

상태관리도구 중에 가장유명한 redux 는 코드스테이츠 과정중에 학습한 적이있었지만 필요이상으로 코드가 많이 필요하다고 느껴졌다.

프로젝트규모가 작을수록 가성비가 떨어지는 작업이라고 판단해서 새로운 상태관리 도구를 학습해보고 싶은마음이 굴뚝같았다.

 

그외에 recoil / context Api / mobx / swr / react query 정도 학습해볼수 있는 선택지 들이 있었다.

 

그중에서 제로초님 인프런 강의중에서 타입스크립트랑 swr 이랑 같이 사용하는 강의가 있어서 마침 타입스크립트도 공부할수 있겠다라는 생각에 공부해보게 되었고 그중에서 SWR 에대해서 정리해보려고 한다.

---

(본론)

SWR 에 대해서

홈페이지에가면 (React-hooks library for Data fetching)  이라는 소개를 볼수 있다

소개와 같이 리액트 훅을 사용할때 데이터를 가져오기 위한 라이브러리 라는 것을 알수있다.

 

swr 은 매번 요청 지속적이고 자동적으로 보내지만 데이터를 받는것이 요청이후 응답을 토대로 받는 구조가 아니다

먼저 저장된 캐시에서 데이터를 보내주고 swr 은 내부적으로 검증을 하게 된는 과정을 거치게 된다.

따라서 우리가 보기에 반응속도가 더빠르다는 장점이 있다.

(실시간 경험 이나 중복된 요청을 방지하는데 이점이 있는 상태관리도구이다.)

 

SWR 사용법

swr 홈페이지에 아주 잘 나와 있다. 일단 useSWR 을 install 이후 불러온다.

그리고 인자로 url 주소와 , 함수(fetcher)를 넘겨준다. 그다음 인자로는 추가적인 옵션을 넣어주는 자리이다.

그리고 첫번째 인자자리에는 꼭 url 정보만 넘겨야 하는것은 아니다 특정 키워드로 데이터를 저장하고 불러올수 있어서 전역상태관리 도구로 이용할수있다.

 

fetcher 라는 함수는 우리가 코드를 적어서 설정 해줘야 하는 부분이다. 예시를 살펴보자

import axios from 'axios';

const fetcher = (url: string) => axios.get(url).then((response) => response.data);

export default fetcher;

useSWR 의 첫번째 인자를 fetcher 내부에서 사용하는 형태이다. 위 예시에서는 url 을 받아와서 요청을 넣고 그값을 반환한다.

 

const { data , error} =useSWR() 반환한 값을 data, error 를 통해서 사용할수 있게된다.

 

이외에도 mutate 나 revalidate 로 재요청 시점을 명시할수도 있고

옵션으로 dedupinginterval 캐시된 데이터를 보존하는 시간설정 이라던가 많은 옵션들이 있다.

 

github.com/vercel/swr/tree/master/examples

vercel/swr

예시가 잘 나와있으니 필요할때 공부해서 쓰기도 좋은 라이브러리 이다.

 

개인적으로 라이브러리를 선택할때 많이 쓰이는지 ? 그리고 설명이 잘 되어있는지? 를 고려하는데 설명이 잘되어있고 상태관리라는 개념을 이거보다 더 최적화 할수 잇을까 ? 할정도로 앞으로 많이 쓰일거 같다 아직 이거저거 안써봐서 잘모르긴 한데 무튼 지금까지는 그렇다