개발
Redux-Toolkit: React state 관리 props 지옥에서 벗어나보자 - 2
크레리누
2021. 11. 12. 11:12
[개발] - Redux-Toolkit: React state 관리 props 지옥에서 벗어나보자 - 1
Redux-Toolkit: React state 관리 props 지옥에서 벗어나보자 - 1
React로 개발하다보면 state를 관리해야되는데 상위 Component에 있는 props를 하위 Component가져와 사용할 경우가 일반적이다. 위 그림처럼 props를 전달해야되는데, 내가 만들고 있던 프로젝트에서 계
rainlee-develop-well.tistory.com
1탄부터 정주행 하실분들은 위 링크를 클릭하시면 됩니다.
props 지옥을 끝내기 위해 상태관리 라이브러리를 사용하려고한다.
이러한 상태관리 라이브러리 중 유명한 것은
Redux / MobX
되겠다. 두가지 다 각각의 장단점이 존재한다. 간단하게 장점을 설명하자면 아래와 같다.
- props 문법이 번거롭고, 하위 Component로 props를 보내야할게 많을때
- state의 변경관리를 쉽게하기 위해
- 찢어져 있는 props를 한 파일에 보관하여 관리가 용이하고 수정사항이 있을경우 한곳에서 수정하면 되니 유지보수성이 좋아진다.
그 중 내가 선택한 라이브러리는 Redux-Toolkit (이하 RTK)이다.
Redux-saga, Redux-thunk, MboX 등 여러가지가 있지만 그중 RTK를 선택한 이유는??
- Redux에서 자주쓰는 기능들을 모두 다 모아둔 라이브러리로 비동기를 위한 Thunk, Saga, state의 불변성 관리를 위한 Immer가 내장된 리덕스팀에서 공식적으로 만든 라이브러리.
- 규격화된 패턴과 변수명칭(?)이 존재하여 배우는 입장에서나 유지보수적인 측면에서 이해가 쉬워 선택하였다. MobX의 경우는 간단한 문법과 쉬운 사용법으로 쓰려고했으나 가독성을 위해 '@' 문구를 사용하는 decorator syntax를 지원하지만 글을 작성하고 있는 현재(21/11/11) 공식적으로 지원하고 있지 않기에 RTK처럼 패턴화가 되어있는 라이브러리를 선택했다.