Recoil + React Query를 사용하는 이유

최근 학교 수업에서 Recoil을 배웠다. 앞으로 진행하게 될 프로젝트에서 원래는 Redux Toolkit을 사용할 예정이었다. 하지만 Recoil을 배우고 난 뒤에는 생각이 바뀌어서 Recoil을 사용하기로 했다. 검색을 해보니 Recoil과 React Query를 같이 사용하면 더 좋다는 결과가 많아서 두 라이브러리를 같이 사용하여 프로젝트를 할 예정이다. 이 글에는 저 2가지를 사용해야 하는 이유를 적어보려고 한다.

파일구조

Recoil과 React Query를 사용하면 사진과 같은 파일 구조를 사용해야 할 것이다. 그리고 TypeScript를 사용하여 프로젝트를 진행 할 예정이라 typing 폴더를 따로 만들어 놓는다.

recoil 폴더

recoil 폴더 안에는 atom과 selector을 구성하는 파일들을 모아둔다.

api 폴더

api 폴더에는 서버와 통신하는 비동기 함수들을 모아두는 파일이다. 이렇게 api 폴더에 통신을 하는 비동기 함수들을 모아두는 이유는 로직과 ui를 구성하는 코드를 분리하는 것이 좋기 때문이다. 그리고 리액트는 라이브러리라서 상태 관리를 할 수 있는 여러 가지 라이브러리가 있다. 대표로 redux가 있고 그 외에도 recoil, mobx, swr 등이 있다. 이 상태 관리 라이브러리가 많기도 하고 유행이 자주 바뀔 수 있기 때문에 그냥 단순한 비동기 함수들을 따로 모아두고 사용하면 어떤 상태관리 라이브러리를 사용하더라도 금방 적응할 수 있는 장점이 있다.

Redux의 단점

우선 많은 사람들이 Redux를 사용해왔지만 너무 무겁고 복잡한 것이 단점이었다.

 

-Redux의 단점

1. React 전용 라이브러리가 아님

2. Boilerplate code가 많다.

3. 비동기 처리를 위해 redux-saga, redux-thunk 등의 추가 라이브러리를 사용해야 한다.

Recoil 사용 이유

redux의 단점을 보완하고자 나온 것이 Recoil이다. Recoil은 atom에서 selector를 거쳐서 컴포넌트로 흐른다. 또한 Hooks를 사용하기 때문에 React 문법과 유사하다.

• atom

atom은 Recoil 상태의 단위를 의미하여 컴포넌트간에 공유가 되고 구독, 업데이트가 된다. 위 사진처럼 간단하게 atom을 사용할 수 있다. 리덕스에 비해 더 간단하게 전역 데이터를 생성할 수 있다. 이런 방식으로 Boilerplate code가 줄어들어 코드량이 확연하게 줄어든다.

• selecotr

selector은 atom이나 다른 selector의 상태를 받아서 동적으로 데이터를 반환하는 순수함수이다. 컴포넌트가 자동으로 구독을 하여 상태가 변화되면 자동으로 리렌더링이 일어난다.

 

=> 이런 Recoil을 전역 데이터 관리로 사용하면 효율적으로 프로젝트를 할 수 있다.

React Query 사용 이유

React Query는 서버에서 상태를 불러오는데, 캐싱과 지속적인 동기화를 도와주는 라이브러리이다. 즉 React에서 비동기 데이터를 관리하기 위한 라이브러리이다. 그리고 마찬가지로 hooks를 사용하여 React와 유사하다. 

 

1. Recoil과 마찬가지로 Boilerplate code가 줄어든다.

2. 사진 같은 기능들을 제공해주기 때문에 개발자가 복잡한 구현과 설계가 없이도 효율적으로 화면을 구성할 수 있다. 만약 개발자가 isLoading, error를 직접 구현하다가 잘못하여 isLoading, error 모두 true가 되면 오류가 나게 될 것이다.

3. 사용자 경험 향상을 할 수 있다.

마무리

아직 Recoil과 React Query를 사용하여 프로젝트를 진행하지 않았지만 시작을 앞두고 있는 상황이다. 그렇기에 저 2개의 라이브러리를 써야 하는 이유를 한번 정리해 봤다. Recoil로 전역 데이터를 관리하고, React Query로 서버와 통신하는 비동기 함수를 다룬다면 프로젝트를 효과적으로 진행할 수 있을 것 같다. 지금까지는 Redux Toolkit과 SWR로만 프로젝트를 진행해 봤는데 전에 했던 프로젝트보다 코드는 짧고 더 효율적인 개발을 하고 싶다.

 

-출처

https://abangpa1ace.tistory.com/212

[Recoil] 전역 상태관리 라이브러리 - Recoil 정복기

https://tech.kakaopay.com/post/react-query-1/

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그