처음 만난 리덕스 (Redux) 문서


12.5 Thunk vs Saga

그렇다면 앞에서 배운 Thunk와 Saga는 어떤 차이가 있을까요?
지금부터는 Thunk와 Saga를 한 번 비교해보고 어떤 방식을 사용하는 것이 좋을지 살펴보도록 하겠습니다.

먼저 두 가지 방법 모두 Redux에서 비동기 로직을 포함한 Side Effects를 사용할 수 있게 해준다는 점에서는 동일합니다.
그래서 Redux에서 Side Effects를 사용하고 싶다면 Thunk나 Saga 둘 중에서 선택을 해서 사용하면 됩니다.

그렇다면 둘 중에서 어떤걸 선택해야 할까요?

Thunk vs Saga

이 표는 Thunk와 Saga를 여러가지 관점에서 비교해본 것입니다.

먼저 Async Logic 처리 방식과 관련해서는 Thunk는 Promise를 사용하고 Saga는 Generator를 사용합니다.

그리고 사용 난이도 측면에서는 Thunk는 대부분의 개발자들에게 익숙한 Promise를 사용하기 때문에 상대적으로 쉬우며, Saga는 Generator에 대해 추가로 학습이 필요하기 때문에 어렵다고 볼 수 있습니다.

그리고 작성해야 하는 코드의 양은 Thunk가 Saga에 비해서 적은 편입니다.

마지막으로 복잡한 Async Logic을 구현하는 측면에서는 Thunk는 구현하기 어렵고 Saga는 쉽게 구현이 가능합니다.
Saga에는 다양한 Effect Creator들이 존재하기 때문에 그것들을 잘 조합해서 사용하면 복잡한 형태의 Async Logic도 쉽게 구현할 수 있습니다.

자, 그렇다면 이렇게 Thunk와 Saga를 비교해보았는데, Redux에서 Side Effects를 사용하기 위해서 둘 중에 어떤 것을 사용하는게 좋을까요?

사실, 정답은 없습니다.

규모 ⬆︎, 복잡한 Async Logic ✅ → Saga
규모 ⬇︎, 복잡한 Async Logic ❌ → Thunk

개발자가 각 프로젝트의 상황에 맞게 결정해서 사용하면 되는데, 일반적으로 규모가 크고 복잡한 Async Logic이 있는 애플리케이션의 경우 Saga를 사용하고, 규모가 작고 복잡한 Async Logic이 없는 애플리케이션의 경우 Thunk를 사용합니다.

이 점을 참고해서 각자 개발하려는 애플리케이션에 맞게 선택해서 사용하면 됩니다.


마지막 업데이트: 2023년 07월 14일 00시 00분

이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.