항해99-WIL-상태관리툴 (Redux, Recoil, R-Q, SWR)

장산·2022년 6월 19일

React

목록 보기

5/12

Redux

거의 최초로 React 기반의 상태 관리 라이브러리로 자리를 잡은 지 꽤 되었다. Redux는 이커머스 앱의 문제점을 해결하기 위해 만들어졌다. Store라고 하는 Javascript 객체를 제공하며, 한 번 설정으로 어플리케이션의 모든 상태를 포함하고, 필요할 때 업데이트 한다.
다음은 Redux의 작동 방식을 도식화 한 그림이다.

Redux는 사용자의 액션에 반응(특히 UI에서)하며 상태 업데이트를 처리한다. 또한 Redux는 모든 프레임워크에서 독립 실행형 상태 관리 툴로 사용할 수 있다.

Redux를 왜 사용해야 할까?

상태를 끌어올리는 번거로움이 없어져 어떤 액션이 변경되었는지 쉽게 추적할 수 있으므로 앱이 간편해지고 유지관리가 쉬워진다.

커뮤니티 지원

성능향상

Redux를 통한 상태 예측

로컬 스토리지를 통한 상태 지속성

서버 사이드 렌더링

유지 보수성

쉬운 디버깅

Recoil

Recoil은 상태 관리 라이브러리 커뮤니티(Context, Mobx, Redux 등과 같은 수많은 우수한 라이브러리가 있는 커뮤니티)에서 최신의 툴이다.
Recoil에 대해 자세히 설명하기에 앞서, 이 새로운 상태 관리 라이브러리는 React의 공식 상태 관리 라이브러리는 아니다. 하지만 Recoil은 페이스북의 팀인 리액트를 개발한 엔지니어들에 의해 제작되고 출시되었다.
하지만 Redux가 React의 공식 라이브러리가 아닌 것처럼, Recoil도 React 에코 시스템 전반에 가치가 있다고 입증되면 React 매니아들로부터 대규모 채택을 받을 수 있다.

Recoil이 해결하는 주요문제

러닝 커브가 있지만 다른 상태 관리 라이브러리와 마찬가지로 전역 상태 관리의 문제를 해결한다.
짧은 기간 Recoil은 사용해본 후 다음과 같은 특장점이 아주 편리하게 생각 되었다.

react다운 접근과 단순함

쉬운 러닝 커브

앱 전체적인 상태 관찰

React-Query

서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다.

React-Query 사용하는이유

서버로 부터 값을 가져오거나 업데이트 하는 로직을 store 내부에 개발하는 경우가 많습니다. 그렇다보니 store는 클라이언트 state를 유지해야하는데 어느 순간부터 store에 클라이언트 데이터와 서버 데이터가 공존 하게 됩니다. 그래서 react-query를 사용함으로 서버, 클라이언트 데이터를 분리합니다.

React-Query 장점

캐싱

get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다.

데이터가 오래 되었다고 판단되면 다시 get

동일 데이터 여러번 요청하면 한번만 요청한다.

무한스크롤

비동기 과정을 선언적으로 관리할 수 있다.

react hook과 사용하는 구조가 비슷하다.

SWR

HTTP 캐시 무효화 전략이며 HTTP RFC 5861(HTTP의 캐시 제어 확장)에 의해 동작한다. SWR은 캐시로부터 데이터(stale)를 일단 반환하고, fetch 요청(revalidate)을 보낸 후, 최신 데이터를 업데이트합니다.
즉, 백그라운드에서 캐시를 재검증(revalidate)하는 동안에 기존에 캐시된 데이터(stale; 탁한, 지루한)를 사용하게 한다는 것이다. 이는 에러를 반환하더라도 캐시된 데이터를 활용할 수 있게 함으로써 데이터를 계속 호출하는데 시간을 쓰지 않고, 캐시된 데이터를 이용해 효율적으로 동작한다.