[Typescript] SWR로 React에서 전역상태관리 라이브러리 걷어내기

[Typescript] SWR로 전역상태관리 대체하기

서론

이번 포스팅에선 흔히 프론트엔드에서 사용되는 전역상태관리 라이브러리(Redux, MobX, Zustand, Recoil 등등...)들을 사용하지 않고 SWR만으로 전역상태를 관리하는 방법에 대해 소개해볼까 한다.

What is SWR?

SWR은 효율적인 데이터를 패칭을 위한 React용 라이브러리이다. SWR을 통해 서버로 요청을 보내고 응답을 받을 수 있으며, 응답을 key에 대응되도록 캐시해준다. 이때, 이전 요청을 통해 받은 응답을 캐시해두기 때문에 key를 통해 바로 접근이 가능하다. 그래서 항상 사용자에게 빠른 응답성을 제공해줄 수 있고, 사용자가 key를 통해 캐시에 들어있는 값을 사용하는 동안 백그라운드에서 해당 요청의 응답을 최신화시켜준 뒤 사용자에게 반영해줄 수 있다.

데이터 가져오기를 위한 React Hooks – SWR

여기서 우리는 SWR이 key값으로 접근할 수 있는 캐시를 만들어 준다는 점에 주목해야한다.
SWR을 통해 만들어진 캐시는 프로젝트 전역에서 key를 통해 접근이 가능하기 때문에, 캐시를 위한 key만 잘 구분해주면 충분히 전역상태관리를 목적으로 SWR을 활용할 수 있게 된다. 데이터 패칭과 전역상태관리를 SWR 하나로 해결할 수 있기때문에 별도의 전역상태관리 라이브러리를 프로젝트에 포함하지 않아도 된다.

How do it?

방법은 간단하다. useSWR hook의 인자 중 fetcher를 넣어주는 부분이 있는데, 이부분에 null을 기입해주면 SWR은 별도의 데이터 패칭을 하지않고 key에 대응되는 캐시만 만들게 된다는 것이 주요 컨셉이다.

데이터 최신화를 위한 revalidation은 불필요하기때문에 useSWR을 사용하지 않고 useSWRImmutable을 사용했다.
'modalOpen' key의 useSWRImmtable이 최초 호출되면 반환하는 data의 값은 null이다. 하지만 fallbackData를 활용하면 null 대신 다른 값을 넣어줄 수 있어, 해당 전역상태의 초기값을 설정해줄 수 있다.

해당 전역상태의 값을 변경하고싶다면 swr의 mutate를 사용하면된다. mutate가 useState의 setState와 같은 역할을 해주며, 리턴을 해줄때 mutate의 이름을 바꿔줄 수도 있다.

전역상태관리 라이브러리를 통해 미들웨어를 꼭 써야만 하는 상황이 아니고 프로젝트에서 이미 SWR을 사용중이라면, 개발에 정답은 없지만 굳이 별도의 라이브러리를 설치하지 않고 이렇게 SWR을 활용해보는 것도 강력 추천한다.