Kitworks Team Study

1. SWR
Data fetching 라이브러리

2. 주제 선정 이유
퍼포먼스 향상을 위한 서버 state 관리의 필요성을 절실히 느낌
반복되는 호출과 렌더링에 스트레스 받음
효율적인 API콜의 필요성을 절실히 느낌

3. 2020년 부터 React Query나 SWR 같은 data fetching 라이브러리
가 인기를 끌고 있고 현재도 꾸준히 순항 중인 것을 볼 수 있음

4. React Query SWR

5. 인기를 끌 수 있던 이유가 뭘까?

6. 기존 상태 관리 라이브러리 문제점
1. 서버에서 fetching 해온 데이터의 경우 시간이 지날수록 일관성이 깨짐
2. 데이터를 최신으로 유지하기 위해 주기적으로 호출해야함
3. 이로 인해 추가적인 많은 코드작성이 필요함
4. 비동기적 데이터 fetching을 위해 미들웨어의 사용 필수

7. SWR의 장점
1. 빠르고, 가볍고, 재사용 가능한 데이터를 가져올 수 있음
2. 최초 데이터를 수집 후 캐시된 데이터를 이용하여 효율적인 동작을 만들어냄
3. 스마트한 에러 재시도
4. 포커싱 시 갱신
5. 소켓을 사용하지 않고도 주기적인 동기화 가능
6. Redux의 복잡한 Boilerplate 보다 훨씬 간결한 코드

8. Local State: 리액트 컴포넌트 안에서만 사용되는 state
React State
Global State: Global Store에 정의되어 어디에서나 접근 가능한 state
Server State: 서버로부터 받아오는 state

9. vs
SWR (data fetching)
Redux (상태관리)
본질 자체가 다르기 때문에 특정 관점에서 비교

10. Server State
비동기 처리

11. Redux Toolkit Server State
createAsyncThunk
프로미스를 반환하는 비동기 함수
Pending.type : pending 상태
Fulfilled.type : 통신 성공 상태
rejected.type : 통신 에러 상태

12. SWR Server State
Data error loading 상태를 한 번에 받아올 수 있음

13. SWR Server State
useSWR hook은 3개의 인자를 받을수 있음
Key : 요청을 위한 고유한 키 문자열 (fetcher 함수의 파라미터로 전달)
Fetcher : 데이터를 가져오기 위한 함수를 반환하는 Promise
Options: SWR hook을 위한 옵션 객체

14. SWR hook

15. SWR preload
캐싱 된 데이터가 있을 때
불필요한 요청 제거
굳이 재 요청 해서 받아 올 필요 없이
cacheKey를 이용하여 데이터 사용

16. 유저가 서버에서 온 데이터를 로컬에서 수정 했을 때
1. 서버에 업데이트 요청을 보냄
2. 요청이 성공하거나, 실패하거나 기다림
3. 요청이 완료되면 화면에 업데이트된 UI를 나타냄
업데이트의 시간이 오래 걸리면 유저는 기다려야하는 문제점

17. 낙관적인 UI
1. 로컬에서 데이터를 업데이트 시키고, 반영된 UI를 즉시 나타냄
2. 서버에 업데이트 요청을 보냄
3. 요청이 끝날 때 까지 기다림
4. 요청이 완료되면 서버 데이터와 로컬 데이터가 일치됨
유저의 눈에는 업데이트한 데이터가 즉시 반영된 것 처럼 보임

18. 참고자료
useSWR 옵션 Link : https://swr.vercel.app/ko/docs/api
https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/
https://steadily-worked.tistory.com/565