안녕하세요. 김용성입니다.
오늘은 지난 포스팅에 이어서 generator를 활용해보고, 중첩사용해보는 것에 대해 알아보도록 하겠습니다.

이전 포스팅 보러가기

generator 활용

이런식의 generator가 있다고 가정해보겠습니다.

generator의 비동기적 처리

function* counter() {
  console.log(1)
  yield 1
  console.log(2)
  yield 2
  console.log(3)
  console.log(4)
  yield 3
  console.log(5)
  return "finish"
}

const a = fn()

console.log(a.next())
console.log("-----------")
console.log(a.next())
console.log("-----------")
console.log(a.next())
console.log("------")
console.log(a.next())
console.log("------")

이 결과는 어떻게 출력이 될까요? 결과는 다음과 같습니다.

1
{ value: 1, done: false }
-----------
2
{ value: 2, done: false }
-----------
3
4
{ value: 3, done: false }
------
5
{ value: 'finish', done: true }

중간 중간 섞여있는 console.log 함수들이 실행되는 것을 제어할 수 있다는 점을 알 수 있어요.
우리는 이러한 점을 활용해서 다양한 툴을 사용할 수 있습니다.

redux-saga 와 generator

대표적으로 generator를 활용하는 것이 있습니다. 바로 redux-saga 인데요.
여러분도 redux-saga를 사용해보셨나요? redux-saga는 동기적으로 처리되는 redux의 단점을 보완하기 위한 미들웨어 라이브러리 중 가장 어렵지만 커스터마이징 하기 좋은 라이브러리인데요. generator의 문법에 대해 파악하신 후에 redux-saga를 배우시면 정말 편하게 배우실 수 있을거예요.
redux-saga의 대표적인 예시를 한번 보여드릴게요.

//user.js

import {all,fork,takeLatest,call,put} from 'redux-saga/effects'
import {LOG_IN,LOG_IN_SUCCESS,LOG_IN_FAILURE} from '../reducers/user'

function loginAPI(){
    //login API POST 요청
}

function* login() {
    try{
       yield call(loginAPI);
       yield put({
            type: LOG_IN_SUCCESS,
         }), 
    }catch(e){
     console.log(e);
      yield put({
           type: LOG_IN_FAILURE,
      });      
    }
}

로그인을 구현한다고 했을 때 다음과 같이 redux-saga 코드를 작성해줄 수 있는데요. 어떤가요? generator를 모르는 상황에서 이 코드를 봤다면 분명 난해하게 느껴졌겠지만, 어느정도 익숙하지 않나요?
generator의 yield 라는 녀석을 이렇게 활용해서 비동기적인 프로세스를 운영할 수 있다는 것이 신기합니다.

중첩 generator

generator를 중첩으로 사용할 수도 있는데요.
다음과 같이 사용할 수 있습니다.

function* myname() {
  yield "Y"
  yield "O"
  yield "N"
  yield "G"
  yield "S"
  yield "E"
  yield "O"
  yield "N"
  yield "G"
}

function* hello() {
  yield "Hello,"
  yield* myname()
  yield "!"
}

console.log(...hello())

Hello, Y O N G S E O N G !

전개연산자를 적절히 활용해줌으로써 이런식으로 출력이 가능합니다:)

🙌 마무리

generator에 대해 2개의 포스팅을 통해 알아보았는데요. symbol에 대해서 다루지 않았기에 의아하신 분들이 계실 수 있어요. symbol같은 경우에는 이후에 iterator에 대해서 다룰 예정인데 그때 같이 다룰 예정입니다🤗🤗
읽어주셔서 감사합니다 :)