리액트 생태계에서 사용되는 상태 관리 라이브러리는 대표적으로 Redux 와 MobX 가 있습니다. 이 둘의 특징을 배워보고 직접 사용하면서 알아가봅시다.
상태 관리 라이브러리의 필요성
상태 관리 라이브러리란게, 과연 필요할까요? 무조건 필요하지는 않습니다. 하지만 한가지는 확실합니다. 규모가 큰 앱에선 있는게, 확실히 편합니다. 제가 존경하는 개발자이면서도.. 리덕스의 라이브러리의 창시자인 Dan Abramov 는 말합니다. "You might not need Redux" (번역)
실제로, 여러분은 리덕스 없이도 좋은 앱을 만들 수 있습니다. 상태 관리 라이브러리가 없으면, 이전에는 글로벌 상태 관리를 하기에 조금 번거로웠는데 리액트 16.3 에서 Context API 가 더욱 좋아지면서 글로벌 상태 관리 또한 별도의 라이브러리 없이 할 수 있게 되었습니다.
글로벌 상태 관리란, 컴포넌트 간의 데이터 교류, 특히 부모-자식 관계가 아닌 컴포넌트끼리 데이터 교류를 하는것을 의미합니다.
하지만, 그럼에도 불구하고 저는 상태 관리 라이브러리를 결국에는 배워보는걸 권장합니다. 모르고 안 쓰는거랑, 알고 안 쓰는거랑 다르기 때문이죠. 저는, 주관적인 생각이지만 Context API 가 아무리 글로벌 상태관리를 조금 더 쉽게 가능케 한다고 해도, 그냥 리덕스를 씁니다, 아니면, MobX 를 씁니다.
그 이유는, 이미 리덕스를 사용하여 프로젝트를 진행하는 흐름이 이미 손에 매우 익숙해져서 리덕스를 사용하는 개발방식이 Context API를 사용하여 개발하는것보다 편하다고 느끼기 때문이고, 또한 이미 리덕스를 사용하고 있는 프로젝트들은 무수히 많기 때문입니다. 추가적으로, 리덕스에서 제공하는 미들웨어같은 강력한 기능은 Context API 로 대체 할 수 없기 때문에, 저는 프로젝트를 만들 때 리덕스와 Context API 를 택합니다. 물론 만약에 미들웨어같은 기능이 필요 없고 진짜 간단한 프로젝트인데 단순히 글로벌 상태 관리만 해야 한다면 Context API 를 택할 수도 있겠죠.
MobX 또한 좋은 대안입니다. 물론 NPM 에서의 사용률만 따지자면 리덕스의 약 10% 이지만, 저는 충분히 학습가치가 있다고 생각하고, 사용해보면 정말로 재미있는 라이브러리입니다. 리덕스와 마찬가지로, Context API 가 대체할 수 없는 강력하고 멋진 기능들을 가지고 있죠.
상태관리 라이브러리를 사용해야 하는 이유는 여러가지가 있을 수 있겠지만, 저는 다음 사항들을 강조하고 싶습니다.
1. 상태 업데이트 로직의 분리
복잡한 상태 업데이트 로직들을 컴포넌트에서 뜯어낼 수 있고, 이를 모듈화 하여 여러 파일들로 저장해서 보기 좋게 정돈 할 수 있습니다. 이를 통하여 더욱 높은 유지보수성을 일궈낼 수 있습니다.
2. 더 쉬운 상태 관리
상태 관리 라이브러리가 없더라면 컴포넌트가 지닌 setState 를 사용해서 열심히 상태를 조합하고, 이를 여러 컴포넌트를 거쳐서 props 로 전달해주고.. 해야하는데 상태 관리 라이브러리는 이러한 작업을 훨씬 쉽게 해줍니다.
Redux vs MobX
정말 어려운 질문이라고 생각합니다. 일단 사용률만 따지면 리덕스가 훨씬 높긴합니다. 그렇다고 해서 여러분들이 리덕스를 사용해야하는 것은 아닙니다. 저는 리덕스를 먼저 사용했고, MobX 는 나중에 가서 배웠는데 늦게 접한 것에 대해서 조금 후회했습니다. 왜냐하면 생각보다 너무 편했고 재미있었기 때문이죠.
이 두 라이브러리는 위에서 언급했던 두가지 사항들을 충분히 만족합니다. 하지만, 그 둘의 작동방식과, 추구하고자 하는 방향과, 개발 방식이 크게 다릅니다. 이 강의를 계속 진행하시면 어떻게 다른지 직접 접하시게 되겠지만 요약을 하자면 다음과 같습니다.
리덕스는 마치 상태관리의 교과서 같습니다. 그리고 매우 리액트스럽습니다. 리액트 컴포넌트에서 동적인 상태를 관리 할 땐 state 에 담고 이를 수정할땐 꼭 setState 를 사용해줬었고, 또 컴포넌트의 업데이트 최적화를 위하여, 불변성을 꼭 지켜줘야했었죠? 리덕스에에서도 마찬가지로 불변성을 필수적으로 따라줘야 합니다. 추가적으로 함수형 프로그래밍 패러다임을 따르기 때문에 함수형 프로그래밍에 익숙하지 않은 개발자들은 처음엔 힘들수도 있다.. 고 사람들이 주장하기는 하나 저는 딱히 그렇게 생각하지 않습니다. 단, 액션, 리듀서, 디스패치 등의 새로운 개념을 접하게 되는 것들이 처음엔 어려울 수도 있으나 좋은 설명만 있다면 큰 어려움은 없다고 생각합니다.
MobX는 조금 과장된 표현일수도 있겠지만 리액트에 흑마법을 끼얹은 느낌입니다. 리액트에서 그렇게 불변성을 유지하면서 개발을 해왔는데 MobX 를 사용하고나면 불변성은 더 이상 신경쓰지 않아도 됩니다. 컴포넌트 업데이트 최적화는 컴포넌트 단위를 최대한 작게 만들고, 리스트를 렌더링 할 땐 리스트 내용 외의 값이 props 로 들어가는것을 방지하기만 하는 몇가지 규칙만 따라주면 알아서 최적화가 잘 됩니다. 그리고, 배우기에 굉장히 쉽고 또.. 재밌습니다. 리덕스 + 리액트만 쓰다가 MobX 쓰면 내가 리액트가 아닌 다른 프레임워크를 쓰고 있는게 아닌가 싶을정도로 신선합니다.
둘 다 사용해보자
가장 좋은건 둘 다 사용해보고 뭐가 더 좋은지, 본인이 선택하는 것 이라고 생각합니다. 한번, 각 라이브러리들을 탐험해봅시다!
목차
Redux
MobX
