음악, 삶, 개발

React 상태관리 라이브러리들 (zustand, recoil, jotai) 본문

개발 Web/React

React 상태관리 라이브러리들 (zustand, recoil, jotai)

Lee_____ 2021. 7. 12. 07:53

최대한 Redux 의 사용을 피하고자 다른 대안이 있는지 뒤져보았다.

Redux 코드들을 이것저것 보았는데, bolierplate 코드가 너무 심하게 많다는 느낌을 지울수없었고,

잘 와닿지도, 이해도 되지않았다. 이렇게 힘들게 상태관리가 되야하는가라는 느낌도 있었다.

이러한 이유로 뒤지다보니, 생각보다 npm 다운로드수가 높은 녀석들이 3개나 있었다.

 

1. zustand : 다운로드수 - 95,890

https://www.npmjs.com/package/zustand

 

2. recoil : 다운로드수 - 92,644

https://www.npmjs.com/package/recoil

 

3.jotai : 다운로드수 - 17,038

https://www.npmjs.com/package/jotai

 

자세한 내용은 더 들여다봐야하겠지만, 이들중에 recoil 만 1시간정도 만져봤는데, 

진짜 1시간만에 어느정도 상태 설정 (마우스 인터렉션에 따른) 것들을 해낼수있었다.

약간 useContext 를 사용하는 느낌인데, 훨씬 더 편하다.

 

사실 recoil 도 매우 편하다고 생각했었는데, jotai 도 recoil 와 비슷한 문법인데 훨씬 더 편리하게 설계되어있다.

zustand 는 문법이 약간 다른데, recoil 나 redux 와 달리, jotai 와 zustand 는 <Provider> 로 아무것도

감싸지않고도 사용가능하다는것이 대박이다.

bundle 크기는 zustand 가 가장 작고, 그 다음 jotai, 그 다음 recoil 이다.

recoil 를 사용할때 약간 불안한점은 javascript 로 작성이 되어있고,

zustand 와 jotai 는 완전히 TS 로 작성이 되어있다.

심지어 recoil 는 Facebook 개발진들이 추친하고있음에도 불구하고 매우 느리게 commit 이루어지는듯한데,

(아직도 0.3 버전)

zustand 는 v3.0 을 넘어갔고, jotai 도 v1.0 을 넘어갔으며 recoli 보다 훨씬 액티브하게 업데이트가 이루어지고있다.

어쨋든 이 3가지를 보면서 상태관리에 관한 마음의 짐을 조금 덜수있었다.

뭐든건 깊이 들어가봐야아는것이지만, 결국 그래도 Redux 를 써야한다는 결론으로 가지않았으면 한다.

 

jotai 같은 경우 사용하다가 문제가 생기면 그리 어렵지않게 recoil 로 갈아탈수있다.

사실 zustand 도 문법이 매우 단순해서, 이 3가지는 서로 넘어가는것이 그렇게 괴롭지않을거같다.

 

추가 : jotai 와 zustand 의 개발진이 같다. jotai 는 recoli 를, zustand 는 redux 를 조금 닯았다고한다.

 

jotai 와 zustand 에 대한 개발자의 자세한 설명 (필독할것)

https://github.com/pmndrs/jotai/issues/13