Redux는 해도해도 헷갈리는 느낌이기에, 한 번 정리해보려 글을 작성한다.
React에서 이야기하는 상태는 무엇을 의미할까?
React에서 사용되는 상태(State)란, 컴포넌트 내 존재하는 변수를 의미한다.
React는 Vue나, Angular와 다르게 데이터가 한 방향으로 흐르는 단방향 바인딩 방식인데, 이는 Props drilling을 발생시킨다고 한다.
Prop Drilling이란, '리액트의 컴포넌트 트리에서 데이터를 전달하기 위해서 필요한 과정' 이라고 하는데, 쉽게 풀이해보자면 React 내에서 상탯값을 전달하기 위해 하위 컴포넌트를 계속 타고 가는 과정이라고 생각하면 된다고 한다.
결국, 상태 관리 라이브러리는 이러한 Props drilling을 방지하기 위해 사용한다고 보면 된다.
상태 관리 라이브러리 종류
총 4개를 확인해보고, 정리해 보았다.
| 종 류 | 특 징 |
| Redux |
Action / Reducer / Select 모두 세팅해주어야 하기 때문에 불편지만, 이로 인해 확장 / 디버깅에 있어서는 강점이 뚜렷하다.
오직 하나의 Store만을 가지며 하나의 객체 트리를 가지기에 디버깅이 용이하다. (중앙 집중 방식)
Store 내부 상태는 오로지 Action 객체에 의해서만 변경 가능하기에, Action만 주시하면 확인이 쉽다.
|
| MobX |
Redux보다 쉽다.
Store가 여러 개가 될 수 있어 분리는 편하지만 상태 변경 시 다른 Store도 영향이 갈 수 있다.
Action 객체를 통한 업데이트가 아니고 수시로 업데이트 하기에, 만들긴 편하지만 유지보수 시엔 어려울 수 있다.
|
| ContextAPI |
React 안에서만 사용이 가능하다.
Root 에서 구성한 Provider을 내려주는 형식이다.
단순한 전역 상태 관리만 필요한 경우에 사용한다. (복잡해지면 Redux등을 사용하자.)
|
| Recoil |
페이스북에서 만들었으며 아톰/ 셀렉터로 이루어져 있다.
아톰은 상태의 단위를 일컫고, 유니크한 키 값으로 구분되며 해당 아톰을 구독하면 그 컴포넌트만 리렌더링된다.
버전이 좀 낮아서 안정성이 떨어진다. |
여기서는 우선 복습을 위해 Redux를 적용 / 공부하며, 이후에는 Recoil을 사용해봐야겠다. (생각보다 편하다고 들었음)
