[React] Redux vs Recoil vs React Query

전역 상태 관리는 왜 해야 할까?

일반적으로 React에서는 데이터는 부모로부터 props를 통해 전달된다.

그러나 컴포넌트를 나누다보면 하나의 어플리케이션 안에 여러 컴포넌트에 전달해줘야 하는 경우가 발생한다.

 

이러한 현상을 Props drilling 현상이라고 한다.

 

Props Driling 

: props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정

 

Props Drilling 현상을 막기 위해서는 전역 상태 관리 라이브러리를 사용해야 한다.

 

전역 상태 관리 도구에는 어떤 것들이 있을까?

Redux

현재 리액트를 사용하는 사람들에게 가장 익숙한 상태관리 라이브러리라고 생각한다. 나 또한 Redux가 가장 익숙하고, 많이 사용해봤다.

 

장점: Redux는 이미 검증된 신뢰성 있는 라이브러리이다. 상태값의 변경 사항을 Redux Devtools를 이용해 직관적으로 볼 수 있는 방법 또한 제공한다. 이로 인해 전역으로 관리해야 하는 상태값이 많아질 경우 디버깅이 상대적으로 Recoil에 비해 더 편해질 것으로 예상된다.

 

단점: 그렇지만 작은 상태 하나를 변경하려고 해도, actions, reducer, type 등 보일러 플레이트 코드를 많이 작성해야 하는 번거로움이 있다.

 

결론: Recoil에 비해 상대적으로 코드를 작성하는 양이 많아진다.

 

(비동기) redux-thunk 혹은 redux-saga, redux-toolkit 등을 이용한다. (비동기 처리 뿐만 아니라 다른 여러가지 기능을 포함해서) 이들 또한 검증된 미들웨어이기 때문에 신뢰성이 높다.

그러나 예를 들어 redux-saga를 사용하게 된다면 제너레이터와 이펙트(redux-saga) 등에 대한 이해가 필요하게 된다.(러닝 커브 상승) 또한 결국 이를 사용하기 위해서는 미들웨어를 추가적으로 설치해줘야 한다.

 

Recoil

장점: 가장 강점은 React의 useState 훅과 비슷하게 동작하는, 직관적이면서 간단한 구조를 가지고 있다. 이에 따라 코드의 양은 매우 줄어들게 된다.

 

단점: 그러나 Redux처럼 따로 안정적인 Devtool이 아직 없다. snapshot이라는 개념이 존재하지만, 직관적으로 볼 수 있는 것은 아니고 콘솔을 이용하는 형태로 볼 수 있다.

Recoilize라는 Devtool이 있는데 작은 버그들이 있다고 한다. (console로 디버그 하는 방식이 좀 더 선호된다)

 

결론: 디버깅의 측면에서 봤을 때 리덕스가 더 유리하다.

 

(비동기) Selector 를 사용한다.Selctor 는 recoil에서 비동기 처리를 위해 사용하며, 기본적으로 값을 캐싱한다. 들어왔던 적이 있는 값을 기억하고 있기 때문에, 같은 응답을 보내는 api call에 대해서는 추가적으로 요청하지 않아 성능적으로 유리하다.

또한 이는 내장되어 있는 기능이기 때문에 redux처럼 따로 미들웨어를 설치해줄 필요는 없다.

 

React Query

장점:

• 비동기 데이터를 관리하기 위한 라이브러리
• 데이터 캐싱에 대한 컨트롤이 가능하다.
• get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예를 들면 게시판의 글을 가져왔을 때 게시판의 글을 생성하면 게시판 글을 get하는 api를 자동으로 실행 )
• 데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries)
• 동일 데이터 여러번 요청하면 한번만 요청한다. (옵션에 따라 중복 호출 허용 시간 조절 가능)
• 비동기 과정을 선언적으로 관리할 수 있다.
• react hook과 사용하는 구조가 비슷하다.

 

단점:

• 아직 개발 중인 라이브러리이기 때문에 해결하지 못한 에러가 발생한다.

 

그 외 여러 전역 상태 도구가 있으나 생략하도록 하겠다.

 

어떤 것을 사용하는 것이 좋을까?

어떤 전역 상태 관리 도구를 사용할지 결정하는 것은 사실 취향 차이라고 생각한다.

(정답이 없다는 뜻이다)

 

내가 앞으로 프로젝트를 진행하게 된다면 

내부적으로 전역 상태 관리를 할 경우에는 Recoil을 사용하고

비동기 통신을 진행해야 할 경우에는 React Query를 사용할 것이다. 

 

 

결론:

Recoil의 장점인 의존성을 갖는 여러 상태들을 체계적으로 관리할 수 있고,

React Query의 장점인 비동기 데이터를 관리 할 수 있을 것이다.

 

참고 사이트

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유

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

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

 

상태관리 기초 - 효율적으로 데이터 저장하고 수정하기

https://han-py.tistory.com/487

[react] 상태관리 기초 - 효율적으로 데이터 저장하고 수정하기