리액트 전역 상태 관리 (redux, recoil)

이번 포스팅에선 리액트의 전역 상태 관리 라이브러리 redux와 recoil에 대해서 알아보도록 하겠습니다. 

 

사용방법은 구글링하면 엄청많이 나오더라구요. 사용법은 이번 포스팅에선 다루지 않도록 하겠습니다. 이번 포스팅에선 hello world 수준으로 redux와 recoil을 써보고 느낀점 그리고 둘의 차이점에 대해서 다뤄보도록 하겠습니다. 

 

Redux

첫인상

redux는 리액트 훅중에 useReducer와 굉장히 유사하더군요. 아니 유사한게 아니고 완전 빼다박았습니다. redux를 조금 경량화한게 useReducer라는 느낌이 들었습니다. 

 

접근성

redux는 보일러플레이트가 굉장히 높았습니다. 설정해줘야하는게 굉장히 많았고 hello world 수준의 예제도 시작하는데 한참이 걸렸습니다. 

 

특징

하지만 장점은 굉장히 객체지향적이라는것... 제가 만든 예제는 hello world 수준이지만 이렇게 객체지향의 냄새가 짙은 것들은 보통 큰 애플리케이션에서 잘 어울리죠. 이 얘기는 뒤에서 recoil과 차이에대해서 정리할 때 다시 언급하도록 하겠습니다. 

 

또한, 객체지향적이라서 그런지 어디서든 내가 저장한 전역 상태값을 불러올 수 있었습니다. 근데 이건 redux의 구조때문에 그런 것 같더라구요. 

 

 

이렇게 컴포넌트와 상태 저장소를 분리함으로써 상태값을 쉽게 가져올 수 있었습니다. 그리고 진짜 전역적으로 상태를 관리한다는게 체감되는 아키텍처를 가지고 있는 것 같습니다. 

 

Recoil

첫인상

recoil은 redux와 완전 반대되는 성격을 가지고 있습니다. 굉장히 사용하기 쉽고 무엇보다 리액트의 근본 훅중 하나인 useState와 사용법이 굉장히 유사했습니다. 

 

접근성

보일러플레이트도 거의 없는 수준이었습니다. hello world 수준의 예제는 그냥 10분도 안되서 뚝딱 만들었습니다. 접근성이 굉장히 좋다는 것이 장점입니다. 

 

특징

recoil의 특징은 사용법이 굉장히 간단하다는 특징이 있지만 리액트 개발팀인 facebook에서 만들었다는 것이 하나의 장점이 됩니다. 리액트 개발진이 만든만큼 리액트와 호환이 굉장히 좋다는 것이 특징이죠. 

 

또한 redux는 전역적으로 상태를 관리하기 때문에 남발했다가는 쓸데없는 리랜더링이 일어나 성능 저하를 일으킬 수 있습니다. 하지만 recoil은 지역적으로 상태를 관리하기 때문에 조금 남발하더라도 성능에 큰 영향은 없다고 하더군요. 

 

 

그 외

기존 리액트로 개발하던 회사들은 redux를 이용해서 상태 관리를 많이 했다고 하더라구요. 제가 프론트엔드 개발자 공고는 많이 안봤지만 대부분 redux로 상태를 관리하는 것 같았습니다. 

 

하지만 redux는 사용자 경험이 썩 좋은 라이브러리가 아니라고 그러더군요. 그래서 요즘 recoil로 많이 갈아타는 추세라고합니다. 

 

하지만 그렇다고 하더라도 redux는 대형 엔터프라이즈급 회사에서 많이 사용할 것 같습니다. 그 이유는 redux에서는 saga패턴을 지원하는 또다른 라이브러리가 있다고 하더라구요? 이건 굉장히 놀랐습니다. 

 

Saga 패턴이란?

짧게 짚고 넘어가자면 Saga 패턴은 백엔드에서 트랜잭션을 관리할 때 등장하던 단어입니다. 보통 마이크로서비스를 운영하는 애플리케이션에서 중요하게 생각하는 것이 서로 물리적으로 떨어져있는 서버들간 인증을 관리하는 것과 트랜잭션을 관리하는 것입니다. 

 

서로 물리적으로 떨어진 서버들간 데이터베이스 연산 중 안정적인 롤백을 위한 방법론이라는 것이죠. 이것에 대한 자세한 내용은 아래의 링크에 잘 설명해뒀습니다. 

 

https://coding-review.tistory.com/484

데이터베이스 트랜잭션 심화

 

 

다시 본론으로 돌아와서 리액트에서 상태를 전역적으로 관리하고 전파하는 과정에서 네트워크 오류라던가 모종의 버그로 상태가 반영되지 않았을 때 다시 재실행하여 상태를 전달한다던가 상태를 롤백한다던가 이런 일련의 과정들을 지원하는 라이브러리가 있다고 하더라구요. 

 

굉장히 흥미로웠습니다. GPT에게 물어보니 recoil은 이런 상황에서 Saga패턴처럼 롤백하거나 재실행하는 방법은 없다고 하는데 이를 useEffect를 이용해 국지적으로 적용할 수는 있다고 하더군요. 

 

하지만, 이런 이유 때문에 redux는 크기가 큰 애플리케이션에서 잘 사용할 것 같습니다. 

 

 

마치며

요즘 프론트엔드를 공부하면서 왜 프론트엔드의 기술들이 생명주기가 짧은지 간접적으로 경험할 수 있게 되었습니다. 리액트가 등장하고 전역 상태 관리를 redux로 한게 얼마 안됐는데 그새 recoil로 넘어간다 만다 소리가 나올 정도니 말 다했습니다. 

 

개발자는 평생 공부해야한다고 말하는게 프론트엔드와 백엔드가 조금 다른 의미로 적용되는 것 같습니다. 

 

프론트엔드는 항상 새로운 기술을 공부해야해서 끊임없이 공부해야하고 백엔드는 공부할게 너무 많아서 끊임없이 공부해야하는 것 같네요. 

 

이번 포스팅에선 리액트에서 전역적으로 상태를 관리하는 라이브러리인 redux와 recoil를 사용해보고 첫인상, 특징들, 그외 특징들에 대해서 알아봤습니다. 

 

긴 글 읽어주셔서 감사합니다. 오늘도 즐거운 하루 되세요~