11/24[TIL]Redux

기존에 React에서는 state는 컴포넌트 안에서 관리하고 형제 컴포넌트들 간에 데이터를 주고받을 때 부모 컴포넌트를 통해 주고받는데 deep 한 컴포넌트에게 데이터를 보내야 한다면 상태 관리가 매우 힘들게 된다.

 

그렇게 나온 해결책의 개념이 Redux(state container)이다. 같은 상태를 공유하고 싶을 때 Redux를 사용하게 된다.

Redux를 설명하기 앞서서 여러가지 기본적인 개념이 존재하는데 

먼저 상태가 관리되는 오직 하나의 공간인 store가 존재한다.

그리고 js 객체에 해당사항을 입력하여 보내는 action 즉, 주문서가 존재한다.

또한 현재 state와 action을 이용해 다음 상태를 만들어대는 Reducer가 존재하는데 여기서 Reducer는 순수 함수이다.함수이다.

 

Redux는 앞서 말한 수순 함수를 사용하기에 테스트를 붙이기 쉽고 상태가 예측 가능하다. 그리고 유지보수 측면에서 강점을 보이며 action과 state의 로그기록이 남기 때문에 디버깅에 유리하다.

 

 

 

Redux의 데이터 흐름을 간단히 살펴보자면

이벤트가 생겨서 action객체를 보내면 reducer가 기존의 store에 저장되어 있던 state를 가지고 와서 action과 조합을 하여 새로운 state를 만들어내서(action + state => state) store에 저장한다. 그렇게 store에 저장되고 변화된 state를 컴포넌트 트리에 즉, 변화된 뷰를 렌더 하게 된다.

그리고 히스토리 안에 예전 state는 남아있으며 이는 앞서 말한 유지보수 디버깅 이점이 된다.

 

앞서 말한 데이터 흐름을 더 구체적으로 말해 보자면 dispatch (action이라는 객체를 이용하여 reducer에 전달 그리고 새로운 state를 store에 전달해서 state를 새로운 state로 바꾸고 기존의 state는 히스토리에 저장함)