Redux-saga 알아보기

채용 과정을 진행하면서, redux-saga를 기술 스택으로 쓰고 있는 회사를 종종 보게되었다.

그리고 현재 과제 전형을 진행하고 있는 회사에서도 redux-saga를 쓰고 있었다. 

 

redux-saga가 무엇인지 전혀 배경지식이 없어서, 아래 아티클을 요약하며 읽어보았다.

https://min9nim.vercel.app/2020-04-23-redux-saga/

redux-saga 가 해결하는 문제

 

- Redux-saga가 등장하게 된 배경

프로그래밍이란 초기상태를 정의하고 입력에 따른 상태변이와 출력을 어떻게 제어할 지를 정의하는 작업의 연속이다.

SPA 웹프로젝트가 유행하면서 컴포넌트 기반의 라이브러리들이 많이 생겨났다. (React, Vue 등) 이러한 라이브러리들은 화면을 컴포넌트 단위로 구조화하고, 애플리케이션의 상태를 효과적으로 화면에 렌더링하기 위해 사용된다. 

 

이러한 개발 단계에서 화면에 그려내는 것 외에도, 외부 입력을 받아서 (사용자 입력 등) 이에 따른 적절한 비즈니스 로직을 처리하고 그 결과를 애플리케이션 상태에 반영하며 필요한 사이드이펙트를 잘 처리하는 작업이 필요하다. 그런데 React는 이를 관심사로 두지 않는다. 

 

그래서 React가 도움을 주지 않는 2가지 -> 애플리케이션의 상태관리 / 사이드이펙트 관리를 어떻게 리액트 생태계에서 해결해 왔는지를 살펴보자. 

 

1. 애플리케이션의 상태관리

 -> Redux의 등장 (자세한 설명은 생략!)

- 리듀서와 액션을 통해 상태를 어떻게 변화시킬것인지에 대해서만 관심이 있다. 

- 외부 입력(사용자 이벤트 등)을 어떻게 처리해야할 지 그 중간 과정에 대해서는 관여하지 않는다.

 

 

2. 사이드이펙트 관리

- 비동기 로직들이 길어지고 복잡해지면 리액트 컴포넌트는 원래의 의도를 벗어나 비즈니스 로직이 잔뜩 포함된 모습의 코드가 된다.

- 원래 리액트가 다루고자 했던 문제는 UI를 그려주고 상태를 어떻게 렌더링할 것인가의 영역이었다. 

- 이러한 비즈니스 로직들을 처리하기 위해 등장하는 것이 리덕스 미들웨어인 redux-thunk 이다. 

 

redux-thunk

- 리액트 컴포넌트에 포함된 비동기 로직들을 분리할 수 있다.

- 그러나, 리액트 컴포넌트와 액션을 모두 순수하게 유지하기 어렵다는 redux-thunk의 한계가 존재한다. 

 

redux-saga

- 제너레이터를 이용해 액션의 순수성이 보장되도록 해준다. 

- 제너레이터는 싱글스레드 기반 자바스크립트에서 별도의 스레드를 fork 하는 역할을 한다. 

- saga는 비동기 처리가 필요한 액션이 발생하고 해당 액션이 dispatch 되면 새로운 스레드를 fork 하고 해당 스레드에서 필요한 비즈니스 로직들을 순서대로 처리한다.

- 이렇게 하면 리액트 컴포넌트와 리덕스의 액션을 모두 순수하게 유지하면서 비즈니스 로직만 따로 처리할 수 있게 된다. 리액트 컴포넌트에서는 특정 이벤트가 발생할 때 단순히 액션을 dispatch 하는 역할만 하게 된다. 비동기 로직들은 saga.js로 분리된다. 

 

 

즉, 

UI/상태 그려주기 -> React

상태관리 -> Redux

사이드이펙트 관리 -> Redux-saga

 

이렇게 관심사를 분리하기 위해 사용하는 라이브러리이다.