[React] 리덕스의 작동원리 : 이론

리덕스는 어떤 원리로 작동되는가? 이것을 알아보기전에 한 가지 알아야 할 것이 있다면, 리덕스는 Central Data Store(중앙 데이터 관리실)를 가진다는 것이다. 리덕스를 사용하는경우 하나 이상의 Store를 가지지 않는다는 점을 유의하자. 

 

그렇다면, 우리는 이 하나의 스토어를 가지고 무엇을하는가?

 

우리는 Store를 가지고 무얼하는가? :

결론적으로 말하자면, 이 스토어안에 데이터를 저장하고, 다른 컴포넌트들은 이 스토어안에 있는 데이터를 받아와서 사용한다. 

이렇게 스토어에 있는 데이터를 컴포넌트가 받아와서 사용하는 행위를 Subscription이라고 한다. 컴포넌트는 스토어에 Subscription 을 하고, 이렇게 했을 경우 스토어안에 있는 데이터가 변경될 때마다, 스토어는 구독중인 컴포넌트들에게 알려준다. 덕분에 컴포넌트들은 즉각적으로 본인들이 원하는 데이터를 받을 수 있게 된다. 

 

중앙 데이터(Store)의 state를 변경하는 법 :

그렇다면 또 궁금한 점이 생긴다. 중앙에 모여있는 이 스토어의 데이터는 어떻게 변경할 수 있는가? 컴포넌트가 변경하는가?

아니. 절대 컴포넌트는 중앙에 있는 store의 데이터에 직접적으로 접근할 수 없다. 컴포넌트는 절대 직접 중앙에 있는 데이터를 조작할 수 없으며, 컴포넌트가 중앙 데이터를 조작하기 위해서 반드시 거쳐야 하는 관문은 reducer이다. 

 

Reducer가 하는 일 : 

이 reducer는 Mutates Store Date에 대해 책임이 있다. reduce라는 개념은 개발을 하면서 통상 들어볼 수 있는 개념이다. 이는 보통 여러가지 데이터를 가공해서 또 다른 아웃풋을 만들어 낸다는 개념이다. 이런 개념은 리덕스에서 사용하는 reducer에서도 동일하게 적용된다는 사실을 기억하자. 

그래서 컴포넌트에서 어떤 행위가 일어났을 때 데이터를 변경해야하는데, 뭘 어떻게 해야한다는 말일까? 컴포넌트에서 어떤 이벤트가 일어났을 때, 데이터를 변경해주는 action을 불러오기 위해서 dispatch가 존재한다. dispatch는 액션을 불러와주고, 이 액션은 리듀서에게 전달된다. 그러고나 나면 reducer는 이 action이 원하는 것이 뭔지를 파악한다. 그리고 원하는 행동에 따라 state를 변화시켜주고, 새로운 state를 Store에 spit out한다.

 

자, 그러면 또 무슨일이 일어날까? 중앙관리실에서 데이터가 변경되었다.  중앙관리실(store)를 구독중이던 컴포넌트들에게 이 사실을 전달한다. '야 데이터가 변경되었다!' 결론적으로 컴포넌트들은 그들의 UI를 업데이트 할 수 있게 된다. 

 

전체적인 관점에서 봤을 때, 이 흐름을 그림으로 보면 다음과 같다.

https://www.tutorialspoint.com/redux/redux_data_flow.htm