[Main-Project] React-Query를 사용한 이유(+처음 사용하는 라이브러리를 빠르게 프로젝트에서 적용할 수 있었던 이유)

🔎React-Query를 메인 프로젝트에 적용하기까지

👉🏻 팀원들과 메인프로젝트에서 사용할 기술 스택과 라이브러리를 정하는 과정에서 React-Query를 도입하자는 의견이 나왔고, 회의 끝에 우리 팀은 결국 Redux Toolkit과 함께 React-Query를 사용했다.

팀원 중 누구도 사용해본 적 없는 라이브러리를 약 4주만에 끝내야하는 메인 프로젝트에서 왜 도입하였는지, React-Query는 무엇인지, 사용하며 느꼈던 장점, 어떻게 새로운 라이브러리를 학습하고 빠르게 프로젝트에 적용할 수 있었는지 등등 기록하며 정리해보고자 한다.

🔎React-Query란

👉🏻 React-Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리이다.

Performant and powerful data ynchronization for React.
Fetch, cache and update data in your React and React Native applications all without touching any "global state".

리액트 쿼리 공식 홈페이지에서도 위와 같이 설명하고 있었는데, "전역 상태"를 건드리지 않고 React에서 데이터를 가져오고 캐시하고 업데이트할 수 있게 해주는 라이브러리인 것이다.

🔎React-Query를 도입한 이유

👉🏻 그럼 왜 우리는 React-Query를 도입하였을까?

기존에 배우고 프리 프로젝트에서 사용했던 Redux 같은 상태 관리 라이브러리도 있는데 왜 React-Query를 사용한 이유는 크게 아래와 같다.

⭐1. 유지 보수 용이
(Redux가 비동기 데이터를 관리하기 위한 전문 라이브러리가 아니라 팀원마다 다르게 구현하여 추후에 유지 보수가 어렵답고 느꼈음, ex) 규격화된 방식이 없어 사전에 코딩 컨벤션을 정하지 않을 경우, 로딩 상태를 관리하는 방법도 팀원마다 달랐었다)

⭐2. Redux를 사용한 API 요청과 비동기 데이터 관리의 불편함 해결
(이전 프리 프로젝트에서 경험했던 비대한 Boilerplate 코드를 해결하기 위함)

⭐3. 서버쪽 데이터들을 효과적으로 관리하기 위함
(우리의 프로젝트는 위치 기반 중고 도서 대여 서비스로, 회원의 정보, 중고 서적 정보, 위치 정보, 서적의 대여 상태 등등 서버쪽에서 관리하는 데이터가 많았기에, 리액트 쿼리를 사용하여 리액트 어플리케이션 내에서 데이터 패칭, 캐싱, 동기, 서버의 상태를 업데이트 하는 것이 용이하다고 판단하였다)

🔎처음 사용하는 라이브러리를 메인 프로젝트에서 빠르게 적용할 수 있었던 이유

👉🏻 사실 프로젝트 기획, 디자인, 개발, 배포, 발표 자료 준비까지 4주도 되지 않는 듀가 있었기에 사용해보지 않은 라이브러리를 도입하는 것에 있어 팀원들 간의 의견 차이가 있었다.

React-Query를 사용해본 팀원도 없는 등 새로운 기술을 학습하고 적용하기까지 절대적인 시간이 부족하다는 것이 우려했던 점이였다.

하지만, 앞서 말했듯이 이전 프리 프로젝트에서 Redux Toolkit만을 사용했을 때 느꼈던 불편함과 우리 프로젝트를 효과적으로 개발하기 위해서는 React-Query를 새롭게 학습해서 적용하는 것이 좋겠다는 생각에 도입하였다.

제한된 듀 안에 새로운 라이브러리를 학습하고 적용하는데 어려움이 있었는데, 이런 어려움은 돌이켜보니 크게 3가지 방법으로 극복할 수 있었던 것 같다.

⭐1. 공식 문서로 학습하기
: React-Query에 대한 여러 블로그들과 유튜브 영상, 강의들이 있었지만, 우리 팀원들은 공식 홈페이지 를 보며 학습했다. 개인적으로 리액트 쿼리 공식 홈페이지는 어떤 라이브러리보다 설명이 친절하게 되어 있어서 학습하기 좋았고, 영어로 기재되어 있다는 어려움이 있었지만 타 블로그에서 의역한 글들로 학습하는 것보다 정확하다는 생각이 들었다.

⭐2. 팀원들과 페어프로그래밍
: 2명씩 짝을 지어 페어프로그래밍을 하여, 새로 학습한 라이브러리를 비교적 걱정 없이 적용할 수 있었고, 누가 모더레이터를 할지, 드라이버가 될지 모르기에 사전에 더 학습에 집중할 수 있었고, 실제로 기능을 구현할 때 페어로 진행하여 쉽게 포기하지 않고 같이 고민하여 해결할 수 있었다.

⭐3. 팀원에게 학습 내용 및 작성한 코드 설명
: 이 부분은 본인이 가장 많은 도움을 받았던 부분인데, 내가 어려움을 겪었던 부분을 팀원분이 해결하신 방법을 구두로 설명해주셨고 설명을 들은 후 내가 코드를 작성하고 작성한 코드를 팀원분에게 구두로 다시 설명하는 방식으로 진행하였다. 이 과정이 시간도 오래 걸리고, 내가 잘 모르는 부분을 타인에게 설명하는 과정이 결코 쉽지 않아 힘들었지만, 덕분에 빠르게 학습을 하고 프로젝트에 적용할 수 있었다. 이 방법을 제시해주신 팀원분에게 감사하다.

🔎 React-Query를 사용하며 느낀 장점

function Users() {
	const { isLoading, data } = useQuery<Users[]>("allUsers", fetchUsers);
    
    return (
        ...
    );
};

export async function fetchUsers() {
	const response = await fetch("https://");
	if(!response.ok){
		throw new Error('데이터 불러오는데 실패했습니다.')
	}
	const body = await response.json();
	return body;
}

👉🏻 React Query의 여러가지 장점들이 있겠지만,

프로젝트에서 느낀 장점은 useQuery훅으로 한줄로 작성이 가능하고 isLoading과, data를 받아올 수 있다는 것이다. (이전 프리 프로젝트를 생각하면, 상태를 지정하기 위한 useState에서 loading, data를 직접 만들어야 했다)

다음으로, React Query는 기본적으로 데이터를 캐시에 저장해두기 때문에 프로젝트에서 맵 페이지에서 마이페이지로 돌아와도 "Loading..."이 노출되지 않아 UX가 좋다고 느꼈다. (React Query는 데이터를 유지하고 있어서 가능한 일이다)

🔎 회고

👉🏻 Redux와 React Query를 같이 도입함으로 Redux는 상태 관리 라이브러리로 상태 관리에 집중할 수 있었고, 데이터 패칭 등 서버측 데이터는 React Query로 효과적으로 할 수 있었다.

짧은 시간 안에 학습하고 적용한 만큼 아직 부족한 점이 많아 앞으로도 학습을 이어나가야 할 것 같다. 하지만 이 과정에서 React Query 뿐만 아니라 Redux에 대해 오해하고 있던 부분도 제대로 알게 되어 얻어가는 것이 많다.

• 참고자료
  카카오페이 Tech log
  우아한형제들 기술 블로그
  리액트 쿼리 공식 홈페이지