[안드로이드] Redux 정리 및 예제 만들어보기

 

Redux 는 특히 공부하면서 어려움이 많았던 것 같다.

(실제로 머리로 흡수가 잘 안 되서 중간에 손 놓기도 했었다..ㅠㅠ)

우여곡절 끝에 지금까지 공부했던 내용을 정리하려고 합니다.

해당 글의 주된 목표는 Redux 에 대한 요약 정리 및 예제를 작성해 보는 것이고,

공부하면서 개인적으로 도움 됐던 자료들은 하단 링크로 공유 드리려고 합니다.

 

 

 

 

 

 

1. Redux 이해

앱에서는 여러 가지의 상태를 가지며 그것을 화면으로 적절하게 표시해 줘야 하는데요,

Redux는 단방향 데이터 흐름(Uni-Directional data Flow)을 가진 아키텍처 중 하나로

앱에서의 상태(State) 관리를 효과적으로 할 수 있도록 도와주는 역할을 합니다.

앱이 커지면 커질수록 상태 관리는 중요합니다.

앱에서의 상태 관리가 꼬이면 사용자에게 보여지는 View가 잘 못 표시되는 오류가 발생합니다.

예를 들어 아래 그림과 같이 A 라는 상태가 여러 곳에서 비동기적으로 영향을 받고 있다고 했을 때,

(각각 Action 별로 처리되는 시간도 예측이 힘듬..)

A 라는 상태가 의도와 다른 결과를 가질 수도 있습니다.

반면 Redux를 적용하게 되면 여러 곳에서 Action이 발생된다고 해도

A 라는 상태는 단 방향으로만 동기적으로 영향을 받기 때문에

Action은 순차적으로 처리되면서 위와 같은 상황을 피할 수 있습니다.

추가로 Redux를 적용하게 되면 Store(전역 상태 저장소)에서만 상태 관리가 이루어지기 때문에

컴포넌트 간의 데이터 전달이 없어지며 보다 효율적으로 접근이 가능합니다.

그림 출처 : 복잡하고 어려운 Redux 적응기

 

 

간단하게 정리해보면

Redux를 적용하면 상태(State) 관리를 효과적으로 할 수 있다.

Why...?

 - 단방향 데이터 흐름(Uni-Directional data Flow)을 가진 아키텍처 중 하나이기 떄문에

 - Store(전역 상태 저장소)에서만 상태 관리가 이루어지기 때문에

 

2. Redux 데이터 흐름 및 구성 요소

아래 그림은 Redux를 적용했을 때의 데이터 흐름을 나타내는 그림입니다. 

 

그림 출처 : Redux + Redux-thunk 동작 원리

 

 

구성 요소를 순서대로 나열해보면 아래와 같습니다.

View(Event) - Action - Dispatch - Store - Middleware - Reducer - Subscibe - View(Update)

순서대로 구성 요소를 하나 씩 살펴보도록 하겠습니다.

액션 (Action)

상태 변화를 시키기 위한 객체다.

Event가 발생하면 해당 Event에 맞는 Action을 Store 영역으로 보낸다.

 

 

디스패치 (Dispatch)

Action을 Store 영역까지 보내는 역할을 합니다.

일반적으로 Store Class 함수로 정의합니다.

 

 

스토어 (Store)

모든 상태 관리가 이루어지는 단 하나의 저장소이다. (앱에서 인스턴스가 하나만 존재해야 한다.)

Store Class 에서는 Action을 처리하기 위한 Middleware, Reducer를 가진다.

 

미들웨어 (Middleware)

Action을 Reducer로 전달하기 전에 사전 처리를 합니다.

일반적으로 Middleware에서 비동기 로직을 수행합니다. (ex 서버와 API 통신)

앞서 말씀드린 것처럼 Redux는 동기적으로 단 방향 처리가 이루어지기 때문에 

Reducer에서 비동기 로직이 존재할 수 없습니다.

이를 보완하기 위해 Middleware가 사용됩니다.

리듀서 (Reducer)

Action을 받아서 정의된 로직을 수행하고 State를 변경하는 역할을 합니다.

 

 

구독 (Subscribe)

새로운 State 변경이 생기면 View에게 알려 주는 역할을 합니다.

 

 

 

 

 

 

3. Redux 활용하여 예제 만들기

정리한 내용을 바탕으로 Redux를 활용한 Todo 예제를 작성하였는데요,

물론 참조한 내용이 대부분이지만 직접 예제를 작성하면서 많은 도움이 된 것 같아요.

해당 예제는 아래 링크로 접속 가능합니다.

https://github.com/bictoselfdev/PracticeRedux

 

 

 

3. 끝으로..

Redux는 확실히 러닝 커브가 높은 것 같습니다..ㅎㅎ

공부하는데 어려움이 있었지만 시간이 걸리더라도 이렇게 정리하고나니 도움이 된 것 같습니다.

혹시 내용이나 예제 관련하여 추가로 코멘트가 있으시다면 언제든지 환영입니다!

마지막으로 자료를 찾아보면서 이해하는데 도움이 됐던 자료들은 아래 링크로 공유 드립니다.

 

 

[Reference]

Flux, Redux, MVI로 알아보는 Data-Uni-Directional Architecture(UDA)-데이터 단방향 구조

안드로이드 비디오에 Redux, Component View 적용기

Redux+Redux-thunk 동작원리

복잡하고 어려운 Redux 적응기

GDG-Flux-Redux-MVI.github