💡 유용한 경우

• Redux-thunk와 비교 시 좀 더 까다로운 상황에서 유용
  

---

• 기존 요청 취소 처리 ((불필요한) 중복 요청 방지)
• 특정 액션 발생 시 → 다른 액션 발생 시킴.
  리덕스와 관계 없는 코드(API 요청 등) 실행 시
  
• 웹 소켓 사용 시
• API 요청 실패 시, 재요청

💡 제너레이터(generator) 함수(ES6)

• redux-saga 에서 사용하는 문법
  

🔹 핵심 기능

함수 작성 시, 함수를 특정 구간에 멈춰 놓을 수도 있고, 원할 때 다시 돌아가게 할 수도 있음.

• 함수
  • 에서 값→ 순차적 반환 가능
  • 흐름 도중에 멈춰 놓았다가 다시 이어서 진행 가능

🔹 기본 예시 & 흐름

function* generatorFunction(){
  console.log("안녕하세요");
  yield 1
  console.log('제너레이터 함수')
  yield 2
  console.log('function*')
  yield 3
  return 4
}

const generator = generatorFunction()

generator.next()
// '안녕하세요'
// { value: 1, done: false }
generator.next()
// '제너레이터 함수'
// { value: 2, done: false }
generator.next()
// 'function*'
// { value: 3, done: false }
generator.next()
// { value: 4, done: true }
generator.next()
// { value: undefined, done: true }

• 흐름

  1. 제너레이터 처음 만들어지면

     함수 흐름 : 멈춰 있는 상태

  2. next() 호출 시

     다음 yield 있는 곳까지 호출 & 다시 함수 멈춤

🔹 함수 사용법

• 만들 때: function* 사용
• 함수 작성 후, 제너레이터 생성 ex. const generator = generatorFunction()

  '제너레이터' 란?
  제너레이터 함수 호출 시, 반환되는 객체

• next함수에 파라미터 넣으면 제너레이터 함수에서 해당 값 조회 가능(yield를 사용)
  • 예시

        function* sumGenerator(){
          console.log('sumGenerator가 만들어졌습니다.');
          let a = yield;
          let b = yield;  
          yield a+b;
        }
        
        const sum = sumGenerator();
        sum.next();
        // 'sumGenerator가 만들어졌습니다.'
        // { value: undefined, done: false }
        sum.next(1);
        // { value: undefined, done: false }
        sum.next(2);
        // { value: 3, done: false }
        sum.next();
        // { value: undefined, done: true }

🔹 redux-saga

• redux-saga는 제너레이터(generator) 함수 문법을 기반으로 비동기 작업을 관리해줌.

  == 디스패치하는 액션을 모니터링해서 그에 따라 필요한 작업을 따로 수행 가능한 미들웨어
  

• 예시

    function* watchGenerator() {
      console.log('모니터링 중...');
      let prevAction = null;
      while (true) {
        const action = yield;
        console.log('이전 액션: ', prevAction)
        prevAction = action;
        if(action.type === 'HELLO'){
          console.log('안녕하세요!')
        }
      }
    }
    
    const watch = watchGenerator()
    
    watch.next()
    // '모니터링 중...'
    // { value: undefined, done: false }
    watch.next({type: 'TEST'})
    // '이전 액션: ' null
    // { value: undefined, done: false }
    watch.next({type: 'HELLO'})
    // '이전 액션: ' { type: 'TEST' }
    // '안녕하세요!'
    // { value: undefined, done: false }

---

• 참고: 리액트를 다루는 기술_김민준 저