React 개발을 공부하면서 , 상태관리에 대해서는 많이 접하게 되었다.
상태 관리를 하는 라이브러리는 대표적으로 4가지가 있고 , 상태관리를 왜 사용해야 하는지에 대해 알아보려고 한다
상태관리를 사용 하는 이유
상태관리를 사용하는 이유는 React에서는 단방향 바인딩을 사용하기때문이다.
React는 단방향 바인딩을 지원하기 때문에 부모에서 자식으로만 state를 props로 전달할 수 있다, 자식의 props를 부모에게 직접적으로는 전달이 불가능하다는 점.
자식에서 부모의 state를 변경하려면 해당 state를 컨트롤하는 함수를 props로 넘겨주는 방식을 사용해야 한다. 하지만 이것이 반복되다 보면 props drilling이 발생하게 된다
또한 프로젝트의 규모가 커질수록 코드를 읽기가 어려워지는 점과 props의 뎁스가 증가하게 되어 불필요한 리렌더링을 유발할 수 있다. 처음에 개발을 접했을 때 이 점을 몰라 무한 리렌더링이 많이 걸린 경험이 있었다.
상태관리 라이브러리의 종류
상태관리 라이브러리는 종류가 대표적으로 4가지가 있습니다.
Redux , MobX, Recoil 등 이 있고
각 라이브러리마다 장단점이 있고 프로젝트의 특성에 맞게 골라 사용하면 좋을것이다.
Redux
Redux는 기본적으로 많은 회사에서 사용하는 상태관리 라이브러리입니다.
많은 개발도구와 라이브러리를 포함하고 있으며 코드가 직관적인게 장점입니다.
장점
- 단방향 모델링 action을 dispatch 할 때마다 기록이 남아 에러를 찾기 쉽다. 타임머신 기능을 사용할 수 있음
- 상태의 중앙화: 스토어라는 이름의 전역 자바스크립트 변수를 통해 상태를 한곳에서 관리하는데, 이를 중앙화라고 하며 전역 상태를 관리할 때 굉장히 효과적이다
- Redux는 상태를 읽기 전용으로 취급합니다. 상태가 읽기 전용이므로, 이전 상태로 돌아가기 위해서는 그저 이전 상태를 현재 상태에 덮어쓰기만 하면 되어 이런 식으로 실행 취소 기능을 구현합니다.
단점
- 아주 작은 기능이여도 Redux로 구현하는 순간 몇개의 파일들을 필수로 만들어야하여 코드량이 늘어나게 된다.
- 타임머신 기능을 사용하려면 불변성 개념을 지켜야 사용할 수 있으므로 state라는 객체를 만들어줘야 한다.
- Redux는 상태를 읽기 전용으로 취급할 뿐, 실제 읽기 전용으로 만들어주지는 않는다. 때문에 상태를 실수로 직접 변경하지 않도록 항상 주의해야합니다. 이를 예방하기 위한
immutable.js같은 라이브러리도 존재합니다.
MobX
MobX는 Redux보단 많이 사용되지는 않지만 2번째로 많이 사용되는 라이브러리입니다.
OOP(객체 지향 프로그래밍) 구조로 상태를 관리하고 처리속도가 빠르며 , 코드가 적고 유연하다는 장점이 있습니다.
장점
- 기본적으로 ES6 Class 방식을 지원하고 권장하며 객체지향적으로 코드를 작성할 수 있다
- 상태관리를 위한 Store와 Component 사이의 연결을 위해 Redux와 달리 번잡한 보일러플레이트 코드를 데코레이터를 사용하여 코드를 깔끔하게 작성할 수 있다.
- 서버 개발자들에게 친숙한 아키텍쳐이다.
단점
- 사용자가 상대적으로 적다보니 레퍼런스가 부족하다.
- 디버깅 툴이 불편하다.
Recoil
Recoil은 Redux, MobX 보다 쉽고 간단하게 배울 수 있고 간단한 라이브러리입니다.
낮은 러닝커브로 쉽게 배울 수 있는 장점과 보일러플레이트가 많지 않은 장점이 있습니다.
장점
- 낮은 러닝커브로 상태관리를 처음 접하는 사람에게는 좋은 라이브러리이다.
- 상태관리를 위한 번잡한 보일러플레이트 코드가 적어 코드가 적다
단점
- 직관적이지 않아 코드를 읽기가 어렵다는 점이 있습니다.
- 에러부분을 잡아주기가 어렵다. 개발자 도구가 완벽하지 않아. 디버깅 및 스냅샷 테스트를 하는데 있어 신뢰성이 부족하다.
Context API
React에서 내장되어 있는 라이브러리로 일일히 props를 넘겨주지 않고도 컴포넌트 트리 전체에 제공할 수 있다. 컴포넌트를 Provider로 감싸주면 하위 컴포넌트들이 전역 데이터에 접근 할 수 있다.
장점
- 정적인 값에 가까운 값을 props drilling에 대신 할 때 사용하기 좋다.
단점
- Context API에서 상태값을 변경하면 Provider로 감싸고 있는 하위 컴포넌트들은 리렌더링이 발생한다.
- 상태관리에는 어울리지 않는다.
주관적으로 작성된 비교글이며 어떤것을 더 배워야 할 지 정리하면서 작성한 글입니다.
