전역 상태관리
React에서의 전역 상태관리는 문자 그대로 전역적으로 상태값을 관리하는 것을 뜻함
👨💻 React에서 전역 상태관리가 필요한 이유
React.js의 특징중 하나가 단방향 데이터 흐름(One-way Data Flow)을 가지고 있다는 것이다.
그 방향은 하향식(Top-down)으로 고정되어 있는데, 이 때문에 상태값을 상위 컴포넌트 관리하며 해당 상태값을 필요로 하는 하위 컴포넌트가 생길시에 Props를 통해 상태값을 뿌려주는 패턴을 사용한다.
다만 하위 컴포넌트가 많아지고 하위 컴포넌트 아래에 Props를 필요로 하는 또다른 하위 컴포넌트가 반복되면 과도한 Props Driling이 발생하게 된다.
Props Driling: props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정
그럼 Props Driling 자체가 나쁘다는 소리인건가?
아니다. React를 이용해서 어떠한 어플리케이션을 만들든 Props Driling은 필연적으로 사용되어질 수 밖에 없다.
아래 예시를 보자
└── components
└── Nav.js
└── SearchCompenents.js
└── ExtendedSearch.js
└── (...10개 정도 되는 컴포넌트들)
└── AutoCompleteList.js예를 들어 Nav.js라는 컴포넌트가 위와 같은 구조로 하위 컴포넌트를 가지고 있다.
Nav.js와 AutoCompleteList.js에서 공통된 상태값을 사용한다고 한다면 Nav.js에서 AutoCompleteList.js에 Props를 통해서 해당 상태값을 내려줘야 된다.
그러면 SearchCompenents, ExtendedSearch 등 10개가 넘는 컴포넌트들을 통해서 Props를 차례로 내려주어야 하는데, 이 경우에는 분명 유지보수에 있어서 어려움을 겪을 수 밖에 없을 것이다.
이러한 Props Driling에 따른 유지보수의 어려움을 견뎌내기 위해 우린 전역 상태관리에 대해서 알 필요가 있다.
물론 과도한
Props Driling을 피하기 위해children을 더 적극적으로 사용하는 것으로 이 문제를 해결할 수도 있다.
❓어떻게 전역 상태관리를 할까?
Context API
React내부에서 제공하는 컴포넌트 트리 내에 전역적으로 데이터를 공유할 수 있도록 하는 방법
Redux
자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 라이브러리
MobX, Recoil 등...
Context vs Redux(를 필두로 한 전역 상태관리 라이브러리)
사실 React에서 Context는 전역으로 상태관리를 하기 위해서 만들어 졌다기 보다는 컴포넌트 트리 내에서 자유롭게 종속성을 주입하기 위해서 만들어졌다.
즉, Props Driling을 피하기 위해 만들어졌다고 보면 된다.
때문에 Context는 따로 상태를 ‘관리’하기 보다는 값을 ‘전달’ 해준다고 생각하면 된다.
상태를 ‘관리’한다고 함은 초기값을 저장하고, 현재 상태값을 읽을 수 있으며, 값의 업데이트가 가능해야 한다.
물론 useState와 useReducer를 이용하여 흉내를 낼 수는 있지만 태생 자체가 그렇지는 않다는 것이다.
반면에 Redux와 같은 전역 상태관리 라이브러리들은 전역적으로 상태를 ‘관리’하기 위해서 만들어 졌다.
Redux는 reducer를 통해 현재 상태값을 저장하고 읽을 수 있으며 사용하면서 action, dispatch를 통해 값을 업데이트가 가능하다.
✅ Context API와 Redux를 사용해야할 때
- 언제 Context 를 사용해야하나
- props drilling 을 피하고자 할 때
- 언제 Context 와 useReducer 를 사용해야 하나
- 특정 컴포넌트에서 어느정도 복잡한 상태 관리가 필요한경우
- Redux 는 언제 사용해야하나
- 여러 위치에 많은 양의 상태 값이 존재 할 때
- 업데이트 로직이 복잡 할 때
- 거대한 코드 베이스를 여러 사람이 작업 할 때
- 상태 변경 시각화가 필요 할 때
- 사이드이펙트, 메모이제이션, 데이터 직렬화등 관리를 위해 더 강력한 기능이 필요 할 때
⚠️ 참고
