20.10.16 [Redux 1]

전부를 이해를 못하더라도 흐름과 포인트를 기억하자!

React는 상태와 속성을 이용하는 컴포넌트 단위라면, Redux는 컴포넌트와 상태를 분리하여 좀 더 Functional Component를 이용하여 상태를 관리할 수 있다.

Root인 App에서 상태를 관리하고 Great-GrandChild Component에서 App의 상태를 변경하는 이벤트가 있다면, Props를 통해 Parent 1 → Child 2 → GrandChild → Grand-GrandChild로 전달하고, 이벤트가 발생한다면 다시 역순으로 올라간다. 또한 Parent 2 → Child 1 → GrandChild에서 App의 Props 상태를 변경하고 Grat-GrandChiild에서 Props를 필요할 수 도 있다. 가벼운 프로젝트라면 상관이 없지만 수 많은 컴포넌트에서 소위 말하는 내려꽂기(Props Drilling)가 있다면 문제가 생길 경우 어디와 어디가 연결되었는지 찾기가 힘들 수 있고 유지 보수가 힘들 수 있다.

하지만 컴포넌트들이 접근할 수 있는 공용 스토어가 있다면 많은 컴포넌트들을 거치지 않고 스토어에 요청을 하면된다. 그리고 Dispatcher라는 스토어 관리자가 있는데 이는 스토어의 상태를 변경할 수 있다. 이렇게 편리하게 사용할 수 있도록 도와주는 것이 Redux다. 하나 유의할 것은 Redux 는 React의 하위 라이브러리가 아닌 자체의 상태 관리 라이브러리다. 그저 React와 궁합이 잘 맞는 것일 뿐!