1. 상태관리 라이브러리란?
- 리액트에서 사용하는 유동적인 데이터를 담는 변수인 State를 전역적으로 관리하는 툴을 말한다.
- Redux가 가장 인기가 많으나 Recoil 등 다른 상태관리 라이브러리도 성장세가 있다.
2. 왜 사용하는데?
지역적인 state의 문제점
1) 등장 원인
Prop 남용
- 리액트로 개발을 하다보면 필히 부모 Component에서 자식 Component로 state 기타 값을 전해주어야 하는 경우가 있다.
- 이 때 보통 Prop을 통해 값을 넘겨주는데 만약 자식 Component가 값을 주려는 부모 Component로부터 1~2단계 건너 있는 것은 Prop으로도 충분히 해결할 수 있다.
- 그런데 만약 값을 받아야 하는 자식 Component가 그 이상의 단계를 거쳐야 한다면 그 사이에 있는 수 개의 Component들은 그 값이 필요 없음에도 단지 전달의 목적으로 받아야 하므로 비효율적이다.
- 이와 같은 경우 상태관리 라이브러리를 사용한다.
2) 사용법
Recoil을 예로
![](https://velog.velcdn.com/images%2Fdb970406%2Fpost%2Fb078ff6b-8f84-4cdd-b2a0-6d42ed97b590%2Fimage.png)
![](https://velog.velcdn.com/images%2Fdb970406%2Fpost%2F552fd5d3-6ac8-46bf-9a0b-3d3789a13f63%2Fimage.png)
- 부모 Component에서 값을 넘겨주는 지역적인 관리에서 벗어나 전역적으로 state를 관리한다.
- Redux, Recoil, Apollo 등 어떤 라이브러리를 사용하건 문법만 다를 뿐 로직은 같다.
- 전역적으로 사용할 state를 선언하고 초기값을 준 후 부모 Component, 자식 Component 상관없이 그냥 그 state가 필요한 Component에서 불러와서 사용하면 된다.
- state값과 setter함수로 상태를 관리하면 된다.
- setter함수로 state의 값을 바꾸면 이를 사용하는 모든 Component들과 그 자식 Component들이 리렌더링되어 값이 갱신된다.
3. 문제점 및 의견
- 상태관리 라이브러리는 꼭 필요하지만 그렇다고 막상 남용하는 것도 좋지는 않더라.
- 오히려 최적화에는 지역적인 useState hook의 사용이 더 나은 경우가 있었다.
- 예를 들어 소파 작업 중 DisplayComment Component의 경우 전역적으로 상태관리하면 메모이징을 하더라도 다른 Component에서 불필요한 리렌더링이 일어났었다(해당 커밋 링크).
- 전역적인 상태를 수정하면 그 것을 참조하는 모든 Component와 그 Component의 자식 Component까지 리렌더링 되어버리므로 그랬었다.
- 따라서 전역적인 상태관리는 프로젝트 내에서 꼭 필요하긴 하지만, 특정 부분에서 필요하지 않은 경우에는 지역관리가 나은 듯하다.