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
을 더 적극적으로 사용하는 것으로 이 문제를 해결할 수도 있다.
React
내부에서 제공하는 컴포넌트 트리 내에 전역적으로 데이터를 공유할 수 있도록 하는 방법
자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 라이브러리
Context
vs Redux
(를 필두로 한 전역 상태관리 라이브러리)사실 React
에서 Context
는 전역으로 상태관리를 하기 위해서 만들어 졌다기 보다는 컴포넌트 트리 내에서 자유롭게 종속성을 주입하기 위해서 만들어졌다.
즉, Props Driling
을 피하기 위해 만들어졌다고 보면 된다.
때문에 Context
는 따로 상태를 ‘관리’하기 보다는 값을 ‘전달’ 해준다고 생각하면 된다.
상태를 ‘관리’한다고 함은 초기값을 저장하고, 현재 상태값을 읽을 수 있으며, 값의 업데이트가 가능해야 한다.
물론 useState
와 useReducer
를 이용하여 흉내를 낼 수는 있지만 태생 자체가 그렇지는 않다는 것이다.
반면에 Redux
와 같은 전역 상태관리 라이브러리들은 전역적으로 상태를 ‘관리’하기 위해서 만들어 졌다.
Redux
는 reducer
를 통해 현재 상태값을 저장하고 읽을 수 있으며 사용하면서 action
, dispatch
를 통해 값을 업데이트가 가능하다.