Redux를 사용하는 이유를 알아봅시다.

컴포넌트 구성이 위와 같이 되어있다고 가정해봅시다. 여기서 G에서 변경한 상태를 E로 전달해야 한다면 어떻게 해야 할까요? Root에서 State를 정의한 다음, State 조작 함수를 Root → A, A → C, C → G 이런 식으로 전달해야 하고, 또 변경한 State를 E에 전달해 주기 위해 State 값을 Root → B, B → E 와 같이 전달해줘야겠죠. 이걸 코드로 구현하게 된다면 정말 복잡해질 겁니다. 만약 State 조작 함수를 바꿔주어야 한다면 A, C, G 컴포넌트 모두 수정해야 할 수도 있습니다. 이렇게 컴포넌트 간 통신이 복잡한 상황을 위해 Redux를 사용합니다. 아래의 사진을 봅시다.

Redux를 사용한다면 상태를 관리해주는 스토어를 컴포넌트 구조와 분리해 위와 같이 복잡하게 코드를 구성할 필요가 없어집니다. E 컴포넌트에서 스토어를 구독합니다. 구독할 때에는 Subscribe 함수를 사용하는데, 인자값으로 함수를 받습니다. 이렇게 스토어를 구독했다면 G 컴포넌트에서 상태가 변경될 때마다 인자값으로 넣어준 함수가 실행됩니다. 여기서 상태를 변경하는 데 Dispatch 함수가 사용됩니다. 위의 함수 및 용어들은 뒷장에서 충분히 설명할 것이니 그런게 있구나 하고 넘기시면 좋을 것 같습니다.