Server 데이터 관리

[guesung]

1. React Qeury
2. SWR

[guesung]

• data fetching 라이브러리인 React Query와 SWR을 npm trend로 비교
  

• data fetching라이브러리에서 인기를 끌 수 있었던 이유

  • React 프로젝트에서 사용되는 상태 : Local State(컴포넌트 안에서만 사용), Global State(프로젝트 어디에서나 접근), Server State(서버로부터 받아오는 state)
  • Redux, Zustaand같은 상태 관리 라이브러리로 Global State 관리를 해왔음. data fetching라이브러리를 사용함으로써 상태 관리 라이브러리에서 비동기 로직을 제거하여 관심사가 불히되고 선언적으로 프로그래밍이 가능

• Redux로 비동기 처리를 하기 위해서는 미들웨어인 redux-thunk, redux-saga 사용

  • redux-thunk : store에 던져진 액션을 가로채서 비동기 로직을 수행한 후 액션을 발생 => 액션을 스토어에 던진 후 상태가 언제 반영되는 지 정확한 시점을 모름

data fetching라이브러리는 위와같은 리덕스의 단점을 해결

1. 선언적으로 프로그래밍 (장황하지 않은 코드)
2. 동일한 API 요청이 여러 번 호출될 경우 한 번만 실행
3. 데이터가 dirty 해진 경우 적절한 시점에 알아서 업데이트
4. Global State와 Server State의 관심사를 분리

[guesung]

SWR

• 데이터를 가져오기 위한 React Hooks
• SWR(Stale-While-Revalidate)
• 백그라운드에서 캐시를 재검증하는 동안에 기존의 캐시 데이터를 사용하옇 ㅘ면에 그려줌
• 도중에 에러를 반환핟라도 캐시된 데이터를 활용
• Next.js 만든 팀에서 개발

import useSWR from "swr";

function Profile() {
  const { data, error } = useSWR("/api/user", fetcher, options);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}

• 인자로 URL, fetcher함수, options 전달

[guesung]

React Query

import { useQuery } from "react-query";

const useUser = id => {
  const result = useQuery(`/user/${id}`, fetcher, options);

  return result;
};

function Example() {
  const { isLoading, error, data } = useUser("123");

  if (isLoading) return "Loading...";
  if (error) return "An error has occurred: " + error.message;
  return <div>hello {data.name}!</div>;
}

• 인자로 URL, fetcher함수, options 전달

[guesung]

RTK Query

• Redux에서도 RTK Query를 발표하며 동일한 흐름에 뛰어들음

[guesung]

Redux Saga

• 사용할 떄 늘어나는 보일러 플레이트 코드들과 사가 함수 재사용에 대한 제약들로 인해 쓸데없이 추가되는 코드 => 유지보수가 어려워짐
• 참고

[guesung]

Redux Thunk

• Redux의 부족한 부분을 채워주는 기능을 하는 미들웨어
• 네트워크 요청의 기능에 도움을 주는 미들웨어중 가장 많이 사용

MiddleWare

: dispatch 함수를 결합해서 새 dispatch 함수를 반환하는 고차함수

• 비동기 action을 action으로 전환
• Redux에 임의의 기능을 넣어 확장하는 방법으로 추천
• 참고

[guesung]

결론

1. 가장 사용할 수 있는 기능이 많고, 유저층이 넓은 React Query로 결정