Recommended
More Related Content
Similar to Reswift로 리액티브 프로그래밍 구현하기
Similar to Reswift로 리액티브 프로그래밍 구현하기 (20)
Reswift로 리액티브 프로그래밍 구현하기
- 1. ReSwift 로 리액티브 프로그래밍 구현하 기 Swift Korea Meetup #2 Eunju Sohn
- 2. • 손은주 • 한양대학교 정보시스템학과 재학중 • 매스프레소 iOS 개발자 (콴다!) • Github @EJSohn
- 4. ReSwift는 단방향 데이터 흐름을 기본으 로 한 아키텍처 라이브러리 (Redux의 swift 구 현체) * https://github.com/ReSwift/ReSwift
- 5. 그런데 왜..?
- 6. • https://en.wikipedia.org/wiki/Reactive_programming • https://karlbowden.com/reswift-prezzo/ • https://stackoverflow.com/questions/34497343/redux-rxjs-any-similarities
- 8. *https://karlbowden.com/reswift-prezzo/ 현재 재생중인 노래 현재 재생중인 노래 같은 뷰 X
- 11. State State ChangesViews - 앱의 모든 상태는 Store에 저장되어 관리
- 14. State State ChangesViews - 앱의 모든 상태는 Store에 저장되어 관리 - State는 Action에 의해서만 변경 가능 - 단방향 데이터 흐름
- 15. Action
- 17. State State ChangesViews - 앱의 모든 상태는 Store에 저장되어 관리 - State가 변화할 때 업데이트 - State는 Action에 의해서만 변경 가능 - 단방향 데이터 흐름
- 19. Action 디스패치 변화한 State 값을 비동기적으로 전달 AddViewController.swift 1. 2. 3.
- 20. SubtractViewController.swift Store에 subscribe한 객체들도 모두 동시에 알림을 받습니다! = state에 관련된 모든 UI 업데이트
- 22. 언제 ReSwift를 사용하면 좋을까? • 여러 곳에서 같은 state를 사용, 변경하는 어플리케이션 • 부작용 핸들링을 해야할 때 • 단방향 데이터 흐름으로 부작용 최소화 • 웹소켓, 다양한 API를 사용할 때 * https://karlbowden.com/reswift-prezzo/
- 23. 이럴 때는 추천드리지 않습니다 • State가 너무 많거나 큰 어플리케이션 • Ex) Image를 직접적으로 저장해두지 말아주세요 • 제스쳐 액션 퍼포먼스가 중요한 앱일 때 • RxSwift를 쓰세요! • Reducer를 심하게 괴롭힐 가능성이 있을 때 (끊이지 않는 action) • 속도 문제를 고려해야합니다. * https://karlbowden.com/reswift-prezzo/
- 24. PS. Redux는 Rx와도 잘 어울립니다! * https://redux.js.org/docs/introduction/PriorArt.html
- 25. References • https://github.com/ReSwift/ReSwift/issues/78 • https://stackoverflow.com/questions/34497343/redux-rxjs-any- similarities • https://redux.js.org/docs/introduction/PriorArt.html • https://github.com/ReSwift/ReSwift • https://karlbowden.com/reswift-prezzo/ • https://medium.com/cocoaacademymag/architecture-thoughts- migrating-marvels-ios-app-to-reswift-ef7f20e84e60
Editor's Notes
- 안녕하세요! 스위프트 코리아 두번째 밋업에서 첫번째 세션을 맡은 손은주입니다. 반갑습니다 저는 오늘 ReSwift라는 라이브러리에 대해서 이야기를 해 보려고 합니다. 일단 그 전에 제 소개를 간단히 하자면
- 저는 현재 대학교 3학년 재학중에 있고, 에듀테크 스타트업인 매스프레소에서 콴다 iOS 버젼을 개발하고 있습니다. 하지만 따로 시간이 날 때에는 회사 R&D 팀에서 ML에 대해 배우기도 하고, 서버 인프라 개발도 돕고 있습니다. 아직까지는 얕고 넓게 많은 것을 경험하려고 노력하는 초보 개발자입니다. 지금 여기 굉장히 많은 분들이 계신데요, 이 중에서는 이 자리에서 ReSwift를 처음 들어보시는 분도 계실 것이고, 이전부터 ReSwift를 알고 계셨던 분들도 계실 것입니다.
- ReSwift는 단방향 데이터 흐름을 기본으로 한 아키텍쳐 라이브러리입니다. 또한 Redux의 스위프트 구현체인 만큼 예측가능한 상태 컨테이너라고도 부를 수 있습니다.
- 분명한 것은 (애니메이션을 보여주며) ReSwift가 리액티브 프로그래밍 라이브러리는 아니라는 것입니다. Swift로 사용할 수 있는 리액티브 라이브러리에는 RxSwift, ReactiveCocoa, ReactiveSwift, ReactiveKit 등이 있죠
- 그렇다면 왜 세션 제목을 ReSwift로 리액티브 프로그래밍 구현하기라고 했을까? 라고 생각하실 수 있습니다. 사기치는 것 아니니 걱정 마세요! 그 이유를 간단히 설명드리기 위해 리액티브 프로그래밍의 정의를 한 번 보겠습니다.
- 위키피디아에 의하면, 리액티브 프로그래밍은 데이터의 흐름에 따른 변화를 만드는 비동기적인 프로그래밍 패러다임이며 이것은 즉 기본 실행 모델이 데이터의 변경 사항을 데이터 흐름을 통해 자동으로 전파한다는 것을 의미합니다.
- ReSwift는 리액티브 프로그래밍 라이브러리가 아니지만, Redux에서 만들어 사용하는 Store는 State라고 부르는 내부의 상태 데이터들에 대해서 비동기적인 변화를 만들 수 있습니다. 즉 Store에 대해서 리액티브하다라고 이야기 할 수 있으며, 부분적으로 리액티브 패러다임을 따르는 형태를 띄고 있습니다. ReSwift의 유저들은 이 특징을 이용해서 State와 UI를 비동기적으로 바인딩합니다. 이 그림은 ReSwift Github 페이지에 나와있는 다이어그램입니다. Action, Reducer, State에 대해서는 잠시 후에 설명드릴 예정이니 그에 대해서는 미뤄두고 작동 방식을 설명드리자면 뷰가 store에 원하는 action을 넘기면 Store는 action을 참조해서 reducer 내에서 state를 변경하고 변경된 state는 뷰에 알림으로 전달되는 방식입니다.
- 이 사진은 음악 앱에서 가져온 캡쳐입니다. 보통 음악 앱들을 보면 이와 같이 하단에 현재 재생중인 음악을 보여주는 툴바가 쫓아다닙니다. 우리가 현재 듣는 음악을 바꾸면, 리스트 그리고 툴바에서는 이가 바로 업데이트되죠. 앱을 만들다보면 이 상황과 같이, 하나의 데이터 소스로부터 싱크를 맞춰줘야하는 UI나 액션이 생기는데요, 사실 이게 곤란한 것이, 기본적으로 사용하는 앱 아키텍쳐인 MVC (Model-View-Controller)에서 구현하기가 여간 복잡하다는 문제점이 있습니다. MVC를 기반으로 만들어진 앱은 보통 앱의 상태에 대해 많은 복잡도를 갖게 됩니다. 수많은 callback, delegate, key-value-observation과 notification이 사용되겠죠. 이렇게 만들어진 앱은 이해하기도 어려울 뿐만 아니라, 찾기 힘들게 쓰여진 의존성으로 인한 코드 부작용도 만들 수 있고, 일관성도 유지하기 힘들게 됩니다. 즉, 같은 앱을 만드는 개발자들임에도 불구하고 각자의 취향에 따라 코드를 쓰게 됩니다. 스타일 가이드를 준수하고, 코드 리뷰를 한다고 해도 릴리즈나 버그픽스가 급하다 하면 하나 두개 놓치는 것이 생길 수 밖에 없습니다. 이런 문제를 예방하기 위해 많은 개발자분들이 MVVM, MVP 등의 아키텍쳐를 설계해서 사용하시거나 이과 같이, 혹은 아닐수도 있고..? 설계부터 타 라이브러리를 고려합니다. 사실 ReSwift도 이런 고민을 해결하기 위해 탄생된 라이브러리입니다.
- 지금부터 ReSwift를 사용해서 이 특징을 가진 아주아주 간단한 앱을 만들어보며 개념과 이론에 대해 설명드리겠습니다. 정말 간단해서 너무 빨리 끝날까봐 걱정이 되네요..
- 만들 앱은 Point 앱입니다. SubtractViewController, AddViewController가 탭바에 연결되어있습니다. 각 뷰에는 현재 포인트를 보여주는 PointLabel, 포인트를 10씩 증가, 감소시켜주는 버튼이 각각 붙어 있습니다. 각 뷰에 붙어있는 버튼을 통해서 현재 포인트를 증가시키거나 감소시키면 각 뷰에 붙어있는 pointLabel은 변경과 동시에 업데이트되어야 합니다. 뷰 A의 버튼을 누르면 뷰 A의 라벨과 뷰 B의 라벨이 동시에 업데이트 되는거죠.
- 보게될 첫번째 개념은 State입니다. State는 앱이 한 순간에 갖는 상태를 의미하는데, ReSwift 앱에서 모든 state는 store 안에 데이터로서 저장됩니다. 이는 복잡해지는 상태 관리 코드를 간단하게 만들며, state tracking을 통한 시간 여행 디버깅 등 괜찮은 장점을 만들어냅니다.
- State 관리를 위해 AppState라는 파일을 만들었습니다. Point App에서 가져야 할 state는 pointState입니다. 이렇게 Integer인 포인트라는 상태를 담습니다.
- 이렇게 선언한 앱의 State는 전역적으로 선언된 store에서 관리되게 됩니다. 여기서는 제 편의를 위해 state가 업데이트 될 때마다 로그를 찍어주는 미들웨어를 추가하였습니다.
- 두번째 개념은 state의 변화입니다. ReSwift는 단방향 데이터 흐름을 지향하기 때문에, store 안의 state를 직접적으로 접근해서 수정하는 것을 금지합니다. 오직 Action에 의해서만 순수 함수인 Reducer 안에서 State가 변경됩니다. 단방향 흐름 패러다임과 순수 함수 작성의 장점이 결합되었다고 볼 수 있습니다. Action은 상태 변경을 설명하는 선언적 구조체인데, 이는 코드를 포함하지 않으며, Store에 Dispatch해서 사용하게 됩니다. Reducer는 각 Action에 대해 다른 상태 변경을 구현하여 작업을 처리합니다.
- 이번엔 Action의 관리를 위해 Action 파일을 작성했습니다. 포인트 앱에서 포인트에 가하는 액션은 포인트 증가, 감소이기 때문에 액션도 addPoint, subtractPoint 두 가지를 선언했습니다. 각 액션은 증가시키거나 감소시킬 포인트의 값을 담고 있습니다.
- 이는 액션을 처리하는 Reducer의 모습입니다. 초기에 state를 생성할 때 포인트는 1000부터 시작합니다. PointReducer는 액션을 받아서, 그 타입에 따라 state를 수정합니다. 보시면 addPoint 액션에서는 state의 포인트에 증가할 포인트를 더하고, Subtractpoint 액션에서는 state의 포인트에 감소할 포인트를 빼는 일을 수행하고 있습니다. 이렇게 Reducer에서 처리가 끝난 스테이트는 store에 재저장이 됩니다.
- 세번째 개녕은 뷰입니다. 뷰는 State가 변화할 때마다 노티피케이션을 받아 UI를 업데이트하게 됩니다.
- AddViewController의 코드입니다. UI 업데이트를 위한 setup 함수를 아래에 따로 만들어 두었습니다. 뷰는 처음 로드되었을 때 store에 구독을 하고, 초기 포인트를 보여줍니다. State의 변경은 Action을 통해서만 가능하지만, 읽기를 위한 데이터는 직접 접근을 통해서 가져올 수 있습니다.
- 뷰를 로드하고 유저가 포인트 증가 버튼을 눌렀을 때 IBAction 안에서 store에 addPoint 액션을 10이라는 값과 함께 디스패치하면 newState 메소드를 통해 변경된 state를 전달받습니다. 이 값을 통해서 다시 UI를 업데이트합니다.
- SubtractViewController 또한 store를 구독하였기 때문에 UI를 업데이트하게 됩니다.
- 완성된 앱입니다! 너무나 간단해서 부끄러운 마음이 들지만 ReSwift가 가져다주는 장점을 보여주는 앱이라고 생각합니다. 이처럼 초기 작업인 State, Action, Reducer를 작성하고 나면 View 내에서 작성해야 하는 코드는 짧습니다.
- 지금까지 ReSwift의 특징 중 몇가지를 예제를 통해 보여드렸는데요 여러분께 충분히 매력적으로 들렸는지는 모르겠습니다만 새로운 재미라던지, 아이디어를 전달해 드렸다면 전 만족할 것 같습니다. ReSwift는 여러 곳에서 같은 state를 사용, 변경하는 어플리케이션에서 빠르고 간단하게 구현하기 좋고, 단반향 패러다임, 순수하게 관리되는 state의 잇점으로 코드 부작용을 최소화할 수 있다는 장점이 있습니다. 테스트 코드 작성하기도 편하고, ReSwiftRecorder로 하는 시간여행 디버깅으로 실시간 테스팅도 할 수 있습니다.
- 하지만 어떤 라이브러리가 되었든 적절한 상황에서, 필요할 때, 충분한 고려를 하고 도입하는 것이 중요하죠. 설레발 주도 개발은 항상 위험합니다. ReSwift를 사용할 때는 다음과 같이 State가 비대하거나, 제스쳐 액션 퍼포먼스가 중요하거나, Reducer가 연속적으로 돌게 되는 상황은 피하셔야 합니다.
- 또한, ReSwift는 Rx와도 궁합이 좋습니다! 실 서비스에서도 사용이 되고있는 라이브러리인만큼, 작은 프로젝트에서 일단 도전해보시길 추천합니다.
- 감사합니다! ReSwift에 관해 더 이야기하고 싶으시면 오늘 언제든지 절 찾아주세요 : )