React 상태관리 툴 비교하기 (redux-toolkit vs recoil vs zustand)

요즘 우리나라 개발 커뮤니티를 보면 recoil + react-query 조합을 사용하는 것이 최신 트렌드로 자리 잡고 있는 듯하다. (요즘이 아니라 1~2년 된 트렌드 같다. 2023년 기준) 그러나 남들이 사용한다고 다 따라서 사용하면 면접에서 질문을 받을 때 당황할 수 있기 때문에(?)가 아니라 사용하는 라이브러리의 스펙을 정확히 알고 만드는 제품의 성능을 향상시키기 위해 차이점을 알고 사용하면 좋을 것 같아서 한번 정리해보려고 한다.

(이 글은 개발 지식이 매우 미천한 자의 미숙한 글이므로 참고만 부탁드리며, 사실이 아닐 경우 정정을 해주시면 매우 감사하겠습니다.)

@reduxjs/toolkit vs recoil vs zustand

대표적인 리액트 상태관리 툴인 redux는 이미 너무 많은 사람들이 까고 있기 때문에(보일러 플레이트가 너무 길다, 러닝커브가 높다 등) 위 세개의 라이브러리를 비교해보려고 한다.

현재 npm trends 순위로는 redux가 가장 다운로드 수가 많고, 그 다음으로는 redux-toolkit, zustand, recoil 순이다. 

- redux-toolkit

redux-toolkit은 욕을 많이 먹은 redux의 불편한 점을 개선해서 나온 것으로 기존 redux를 사용하던 나는 굉장히 쉽게 익힐 수가 있었다. 보일러 플레이트도 많이 줄고, (여전히 recoil이나 zustand와 비교하면 길지만) 무엇보다 RTK Query를 내장하고 있기 때문에 별도의 데이터 페칭 라이브러리 없이 캐싱, 자동 데이터 리페칭 등의 기능을 사용할 수 있다. 관심사끼리 slice로 나눠서 코드 스플리팅도 가능하다. 

- recoil

recoil을 처음 사용해봤을 때의 느낌은 '이게 다라고?' 였다. 그만큼 보일러 플레이트가 없고 사용법도 useState를 사용하는 것 만큼이나 쉽다. 그 말인 즉슨 정해진 바가 없기 때문에 자신만의 코드 스플리팅 철학이나 코드 작성 규칙이 없는 사람들에게는 어떻게 사용하는거지?? 라는 물음이 들 수 있겠다는 생각이 들었다. (내가 그랬다.) 아직 DevTools도 완전치 않아서 콘솔로 확인해야 하고, 데이터 페칭 라이브러리를 별도로 설치해야 한다. 그래서 요즘 recoil + react-query 조합으로 많이 사용하는 것 같다.

- zustand

우리나라보다는 해외에서 사용을 더 많이 하는 것 같은 zustand다. jotai의 개발자가 만들었다고 하는데, recoil 만큼이나 가볍고, 미들웨어로 DevTools도 제공하고 있다. zustand의 특이한 점은 상태를 구독하기 위해 provider로 래핑을 하지 않는다는 것이다. 대신 클로저를 이용하여 스토어를 제공한다. zustand 또한 별도의 데이터 페칭 라이브러리를 함께 사용하는 것이 좋다.

zustand는 검색해도 한글로 된 자료가 많이 나오지는 않는 것으로 봐서는 우리나라에서는 큰 호응을 얻지 못 하는 느낌이다.

 

결론

비교를 해봤지만 무엇이 압도적으로 더 좋다고 생각하지 않는다. 사용하기 편리한 것, 익숙한 것도 하나의 라이브러리 선정 기준이 될 수 있다. 그리고 입사하는 회사의 기술스택에 따라 맞추는 것도 능력이기 때문에 여러가지 툴은 다양하게 사용해보는 것이 좋고, 무엇보다 라이브러리를 깊이 이해하고 각 라이브러리에 맞게 성능 향상 방법을 고민하는 것이 더 중요하다고 생각한다.