Redux-Saga 란

1. Redux-Saga란

redux-saga는 리액트/리덕스 애플리케이션의 사이드 이펙트, 예를 들면 데이터 fetching이나 브라우저 캐시에 접근하는 순수하지 않은 비동기 동작들을, 더 쉽고 좋게 만드는 것을 목적으로 하는 라이브러리입니다.

Redux-saga에 대해 알아보기 전 Saga에 대해 알아보자.

2. Saga 배경지식

• Saga란?

3. Redux-saga란

Redux-saga란 리액트/리덕스 애플리케이션에서 Side Effect(부수 효과)들을 더 쉽고 좋게 만드는 것을 목적으로 하는 라이브러리이다.
애플리케이션에서 어떤 스레드와 같은 역할을 한다. 기존 Saga의 의미는 다른 곳에서 시작되었는데, 데이터베이스 시스템에서 장기 트랜잭션의 관리, 실패가 발생했을 때 처리에 대한 효율적인 방법에 대한 것이었는데, Redux-saga는 이것보다는 작은 의미로 Side-effect에 대한 담당을 하게 된다.  

3. Generator

1) Generator의 기본 원리

Generator에 대해 공부하기 앞서 Interation protocol에 대한 공부가 선행되어야 한다.
제너레이터 함수는 일반적인 함수와 다른 동작을 한다. 제너레이터 함수는 모든 코드를 한번에 실행하지 않는다.

예를 통해 확인해보자.

function* thisIsGenerator() {
  console.log('First Call');
  yield 'First';

  console.log('Second Call');
  yield 'Second';

  console.log('Third Call');
}

const thisIsGeneratorObject = thisIsGenerator();

thisIsGeneratorObject.next(); // First Call { value: 'First', done: false }
thisIsGeneratorObject.next(); // Second Call { value: 'Second', done: false }
thisIsGeneratorObject.next(); // Third Call { value: undefined, done: true }

제너레이터 함수는 일반적인 함수와 다르게 함수를 호출하면, 제너레이터 객체 반환한다.
반환된 제너레이터 객체는 이터러블(iterator 메서드를 소유)이면서 동시에 이터레이터(next 메서드를 소유)인 객체이다. next()를 호출하면 value와 done 프로퍼티가 포함된 Result 객체를 반환한다.

예제를 보면 일반적인 함수와 다른점이 있다. 바로 코드 블록이 한 번에 실행되지 않는다는 점이다.

• 처음으로 next 메소드를 호출하면 첫 번째 yield까지 실행되고 일시 중지된다.
• 두 번째 next 메서드를 호출하면 두 번째 yield까지 실행되고 일시 중지된다.
• 마지막으로 next 메소드를 호출하면 Result객체의 done 프로퍼티 값은 true가 된다.
• next 메소드가 반환하는 객체는 yield문이 반환할 값(yield value)을 나타내는 value 속성과, Generator 함수 안의 모든 yield 문의 실행 여부를 표시하는 boolean 타입의 done 속성을 갖는다.

2) Generator 객체에 인수 전달

제너레이터 객체의 next 메서드를 통해 인수를 전달할 수 있다.
예제)

function* thisIsGeneratorFunction() {
 let res = 0; 
 res = yield res;
 res = yield res;
 res = yield res;
}

const thisIsGeneratorObject = thisIsGeneratorFunction();

thisIsGeneratorObject.next(); // {value: 0, done: false}
thisIsGeneratorObject.next(100); // {value: 100, done: false}
thisIsGeneratorObject.next(11); // {value: 11, done: false}

3) Generator의 비동기 처리

제너레이터를 사용해서 비동기 처리를 동기 처리처럼 구현할 수 있다.
getUserName, getUserId에서 비동기 처리가 완료되면 제너레이터 객체의 next메서드를 통해 제너레이터 객체에 비동기 처리 결과를 전달한다.
제너레이터 객체에 전달된 비동기 처리 결과는 name, id에 각각 할당한다.

예제)

const getUserName = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Pandaman');
    }, 2000);
  }).then((res) => generator.next(res));
}

const getUserId = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(123);
    }, 3000);
  }).then((res) => generator.next(res));
}

function* userGenerator() {
const name = yield getUserName();
console.log(`저의 이름은 '${name}'입니다.`);  
const id = yield getUserId();  
console.log(`저의 아이디는 '${id}'입니다.`);  
}

const generator = userGenerator();

generator.next();

4. Redux-saga 튜토리얼

Redux-saga의 배경지식과 어떤 형태로 Redux-saga가 작동하는지 알았으니, 해당 튜토리얼통해 간단히 연습해보자