React | swr 이란?

state관리, 즉 데이터관리는 지역 상태와 전역 상태로 나눌 수 있다.

 

props로 데이터를 전달하는 것은 지역 상태이고, 다른 저장소에서 데이터를 불러온다면 전역 상태(redux)라고 한다. props로 가까운 컴포넌트로 데이터를 전달하는 지역 상태를 사용 하면, 컴포넌트가 복잡해질 수록 코드가 난잡해진다. 그렇다고 지역 상태가 아닌 전역 상태로 핸들링을 해야하는 것이 항상 좋은 것도 아니다. 

 

 

 

기본적으로 일반적인 경우에는 지역 상태로 데이터를 관리하는 것을 권장

그러다 다수의 컴포넌트 간에 상태 의존성이 높아진다면 전역 상태로 데이터를 관리하는 것을 권장

 

 

 

redux는 prop drilling 문제와 데이터 공유에 따른 의존성을 해결할 대안 으로 떠올랐고, state management(상태관리) 라이브러리의 대세가 되었다. redux의 장점을 요약해 보면 데이터가 Centralized 되어 있어 Predictable 하고 데이터 흐름이 단방향이라 Debuggable (디버깅이 쉽다) 하다. redux의 생태계가 구축되어 있어 필요에 맞게 Flexible하게 구현 가능하다

 

 

 

 

Redux 를 사용할 때 흔하게 부딪힐 수 있는 문제 3가지

 

1. 상태와 변이방법을 정의하기 위한 리듀서와 액션의 코딩량이 많다.
2. 효과적으로 상태를 초기화하기 위한 고민이 필요하다.
3. 지속적으로 로컬 스토어 상태를 원격 서버 상태와 동기화해야 하는 추가 작업이 필요하다.

 

 

 

✅ SWR이란 ?

SWR은 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략

 

SWR은 상태관리용 라이브러리가 아닌 데이터 가져오기(fetch)용 라이브러리이다.

하지만, useSWR을 모듈화 하여 독립된 함수로 처리하면, 여러 컴포넌트들에서 필요한 상태를 가져와 사용할 수가 있으며, 이러한 컴포넌트간 전역 상태를 공유할 수 있다는 특성 덕분에 기존 상태관리 라이브러리를 대체할 수 있다.

 

• swr은 주기적으로 api를 호출한다.
  • 장점: 실시간 채팅을 볼 수 있다.
  • 단점: api의 잦은 호출로 성능이 저하될 수 있다.

• useSWR: 첫번째 매개변수인 url 주소값이 두번째 매개변수인 함수의 매개변수로 들어가서 반환값을 반환한다.
• swr 내가 원할 때 호출하기
  • revalidate: swr api 호출
  • 서버로 다시 요청을 보내서 데이터를 가져온다.
  • 하지만, 로그인 후->사용자 데이터 얻기 위해 또 revalidate? => 요청을 한 번 더 보내기에 비효율!
  • mutate
    • 서버로 요청을 안보내고 데이터 수정
      • mutate(data, false)
    • ✨OPTIMISTIC UI 구현 가능
      • 서버로 요청이 가기도 전에 실제 데이터를 바꾸고, 실제 데이터는 추후에 보낸다. 이는 사용자 사용성 좋아진다
      • mutate(data, false)
      • ex. 인스타그램 좋아요
  • dedupingInterval: 주기적으로 호출은 되지만, dedupingInterval 기간 내에서는 캐시에서 불러온다.

 

SWR은 알아서 요청을 보내는 것이고, 컴포넌트가 마운트 될 때부터 요청을 보냅니다.

자동으로 요청을 주기적으로 보내는 것이고, revalidate, mutate는 수동으로 요청을 다시 보낼 수 있음

 

 

 

 

참고

 

[react] 상태관리 기초 - 효율적으로 데이터 저장하고 수정하기

Redux 를 넘어 SWR 로(1)