Redux-Saga 도입시 겪었던 생각
Redux-saga는 react/redux 앱의 사이드 이펙트, 예를 들면 데이터 fetching이나 브라우저 캐시에 접근하는 순수하지 않은 비동기 동작들을, 더 쉽고 좋게 만드는 것.
Saga는 애플리케이션에서 사이드 이펙트 만을 담당하는 별도의 쓰레드와 같은 것으로 보면 된다.
비동기 통신
React를 사용하면서 이번 프로젝트에 사용하기로 정하고 나서 State 관리와 비동기 통신에 대해 짚고 넘어가야 할 부분들이 생기었다. 전역 상태 관리를 위해서 Redux를 택하고 비동기 통신을 하기 위해 Redux-Saga를 택하였다. 택하는 기준은 현재 프론트엔드 생태계에서 가장 많이 사용되고 유지보수가 쉽고 판단되는 기준(어떻게 보면 맞고 어떻게 보면 아니다)에 의해서 결정되었다. 그리 정하고 Learning을 하는 도중 의문이 생기었다.
Redux-Saga를 굳이 사용하여 이 많은 양의 코드를 추가하는 Saga를 굳이 써야 할까(하나의 액션을 변경하여 적용하기 위해서 4개 정도의 파일과 최소 40줄 정도의 코드를 추가적으로 작성해야한다. 그래도 Hooks를 사용하고 다양한 package를 사용하여 코드량을 줄인 정도이다.)?
ES8에서 추가된 async/await로 구현하면 코드량도 훨씬 줄고 가독성도 올라갈 것 같았다. Saga는 4년전인 15년 12월에 나왔고 async, await는 es8에 나와 17년에 릴리즈 되었으니 이전에 사용하던 Saga를 사용하기 보다는 async/await를 사용하는 것이 좀 더 효율적으로 보였다.
그래서 찾아본 결과
https://thecodebarbarian.com/redux-saga-vs-async-await
이런 article 이 있었는데 나름 명쾌히 정리되었다.
article에 의하면
- async/await이든 Redux-Saga 사용상의 이점은 크게 없다.
- 하지만 좀 더 자세한 동작에 대한 handling을 가능하게 하는 것이 Redux-Saga이다(takeLatest(), next()등)
- 코드 량은 현저히 async/awiat가 적다.
그러므로 비동기 처리를 위해서 꼭 Redux-Saga를 사용할 필요는 없는 것이다.
코드는 최대한 적게 짜고 가독성 높은 코드를 짜는 것을 선호하는 나는 코드량이 많은 Redux-Saga가 반갑지 않지만 개발자로써의 다양한 Handling(위글에서는 대표적 예시로 takeLatest를 이야기 하고 있다.)을 해볼 수 있다는 장점과 현재 Redux 비동기 통신에서 많은 점유율을 차지하고 있는 Redux-Saga를 사용하여 프로젝트를 진행해 볼 수 있어 Saga를 사용하는 것이 좋다고 판단하였다.
아래는 Saga과 관련 메소드와 Generator(Saga의 주가되는 함수)함수에 대해 알아보자.
- * : 함수 뒤에 *를 선언하여 Generator 함수라는 것을 선언해 준다.
- yield : 키워드 뒤에 있는 값들을 순서대로 넘겨준다.
- next : 이 메소드는 다음 두 속성을 갖는 객체를 반환해야 한다.
- done : 반복이 모두 끝났는지를 나타낸다.
- value : 현재 순서의 값을 나타낸다.
- call : 첫 번째 파라미터로 전달한 함수에 그 뒤에 있는 파라미터들은 전달하여 호출해준다. 이를 사용하면 나중에 테스트를 작성할 때 용이하게 사용한다.
- delay : 해당 메소드를 실행하기 전에 대기하는 메소드
- takeEvery : 특정 액션을 모니터링을 하고, 발생하면 특정 함수를 발생시킨다. takeEvery을 통해 액션을 바라보고 액션이 dispatch 될때마다 action을 실행하기 위해 takeEvery핼퍼 함수를 사용한다.
- all : Redux-Saga를 여러 개를 묶어서 사용할 때 all effect를 사용한다.
- put : 우리가 이펙트라고 부르는 예중 하나이다. 이펙트는 미들웨어에 의해 수행되는 명령을 담고 있는 간단한 객체이다.
위와 같이 정리하였고 통신을 할때 모든 통신은 비동기 통신으로 진행하여 Store에 저장할 예정이다. 그리고 해당 컴포넌트에 값을 dispatch하여 매핑을 할 것이다.
Redux-Thunk라는 콜백을 이용한 비동기 통신도 존재하나 Saga와 비교하는 글은 첨부하겠습니다.
