React 상태 관리 비교 Redux & React Query & SWR

상태 관리에 대한 고민

프로젝트의 댓글 기능을 구현하던 중, 습관적으로 사용했던 리덕스 코드를 걷어내고 나니 새로운 문제점을 발견했습니다.

댓글 생성, 업데이트, 삭제시 서버에 API 를 요청하고 응답 값을 받아 오기까지의 시간이 꽤나(?) 길다는 것입니다.

응답값에 따라 성공 여부를 판단하고 추가(수정,삭제) 된 댓글을 보여주기 때문에 이 부분은 어쩔 수 없는 부분이라는 생각이 들었지만..? 순간, 다른 서비스들은 어떻게 실시간으로 반응하지?! 라는 의문점이 들었습니다.

 

찾아 보니, 해결 방법은 있었습니다.

요청이 성공했을 것이라 예상하고 값을 미리 보여주고! 그 다음 서버에서 응답 값을 받았을 때, 실패했다면 값을 거둬 들이는 것입니다.

저는 이 방법을 활용해야 겠다는 생각이 들었고 현 프로젝트에 잘 맞는 라이브러리를 선택하기 위해 공부하며 이 글을 씁니다.

 

참고한 링크들

https://fe-developers.kakaoent.com/2022/220224-data-fetching-libs/

 

 

상태관리가 왜 중요해 졌을까?

UI/UX 의 중요성과 함께 프로덕트 규모가 많이 커지고 FE 에서 수행하는 역할이 늘어남 -> 관리하는 상태가 많아짐.

 

상태란?

• 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있음.
• 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터.
• 개발자 입장에선 관리해야하는 데이터들.

리액트 프로젝트에서의 상태

• Local State: 리액트 컴포넌트 안에서만 사용되는 state
• Global State: Global Store에 정의되어 프로젝트 어디에서나 접근할 수 있는 state
• Server State: 서버로부터 받아오는 state

상태관리는?

• 상태를 관리하는 방법에 대한 것
• 상태들은 시간에 따라 변화함
• React 에선 단반향 바인딩이므로 Props Drilling 이슈도 존재
• Redux 와 MobX 같은 라이브러리를 활용해 해결하기도 함

리덕스에서 Server State 처리

동기적인 로직(Global State)에서는 액션과 리듀서를 직관적으로 작성할 수 있지만, 비동기 로직(Server State)을 처리하기 위해선 미들웨어를 사용해야 한다. 비동기 로직을 처리하는 미들웨어는 redux-thunk와 redux-saga 가 있다.

 

redux-thunk는 store에 던져진 액션을 가로채서 비동기 로직을 수행한 후 액션을 발생

-> 상태가 언제 반영되는지 정확한 시점을 모름.

redux-saga 는 코드가 길다. 대신 액션을 순수 객체 형태로 쓸 수 있다.

 

React Query & SWR

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

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>;
}

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>;
}

사용법은 비슷합니다. fetcher 는 promise 를 리턴하는 모든 함수가 올 수 있습니다.

data fetching 라이브러리를 사용하면, 쉽게 데이터를 가져올 수 있고 동일한 요청을 하는 여러 컴포넌트가 동시에 렌더링 되더라도 한 번만 요청합니다. 또한, 백그라운드에서 서버에 주기적으로 polling을 하면서 데이터가 유효한지 검사하고, 유효하지 않으면 업데이트하여 데이터를 동기화합니다