🔖 8월 6일 TIL

generator와 일반 함수의 특징은?

1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.
2. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고 받을 수 있다.
3. 제너레이터 객체를 반환한다(이터러블이면서 동시에 이터레이터이다.)

그럼 정의는 어떻게 할까?

function* minsu() {
  const myMsgList = [
    '안녕 나는 민수야',
    '만나서 반가워',
    '내일 영화 볼래?',
    '시간 안 되나?',
    '내일모레는 어때?'
  ]
  for (const msg of myMsgList) {
    console.log('수지: ', yield msg)
  }
}

const a = minsu()
console.log('민수: ', a.next().value)
console.log('민수: ', a.next("안녕!").value)
console.log('민수: ',a.next("나도 만나서 반가워!").value)
console.log('민수: ',a.next("그건좀...").value)

위의 코드에서 보다시피 function*을 통하여 구현할 수 있다.
또한 하나 이상의 yield 표현식을 포함한다.

1. yield는 제너레이터 함수의 실행을 일시중지시키거나 키워드 뒤에 오는 표현식의 평가 결과를 제너레이터 함수 호출자에게 반환한다.
2. next메서드에 전달한 인수는 제너레이터함수의 yield 표현식을 할당받는 변수에 저장된다.

그렇다면 위의 코드는 어떤 결과가 나올까?

1. 처음 next 메서드를 호출하면 첫번째 yield 표현식까지 실행되고 일시 중지된다.

   • 여기서 첫번째 next메서드는 인수를 전달하지 않기 떄문에 값을 입력해도 무시된다.
   • 때문에 첫번째 yield된 값인 '민수: 안녕 나는 민수야'가 출력된다.

2. 두번째 next 메서드를 호출할 때 전달한 인수 "안녕"은 첫번째 yield 표현식을 호출하는 console.log에 전달된다.

   • 따라서 '수지: 안녕' 이 먼저 출력된다.
   • 다음으로 yield msg가 이터레이터 객체를 반환하여'민수: 만나서 반가워'가 출력된다.

3. 다음으로 "만나서 반가워"가 yield 표현식을 할당받는 변수에 저장된다.

   • 따라서 '수지: 나도 만나서 반가워!'가 출력된다.
   • 다음으로 yield msg가 이터레이터 객체를 반환하여 '내일 영화보러 갈래?' 가 출력된다.

4. 다음으로 "그건좀..."이 yield 표현식을 할당받는 변수에 저장된다.

   • 따라서 '수지: 그건좀...'이 출력된다.
   • 다음으로 yield msg가 이터레이터 객체를 반환하여 '내일 모레는 어때?' 가 출력된다.

   사용예

export function* fetchData(action) {
  yield put(actions.setLoading(true))

  yield put(actions.addLike(action.timeline.id, 1))
  yield call(callApiLike)
  yield put(actions.setLoading(false))
}

위의 예시는 사가 미들웨어 쪽으로 put등의 effect를 실행시킨 다음 사가 미들웨어에 전달한다. 그 후 다시 제너레이터에 실행 흐름을 넘겨준다.
즉, 사가 미들웨어 쪽으로 put에 대한 정보를 넘기고 다시 다음 yield가 실행된다.(작성한 함수와 사가 미들웨어가 협업을 한다.)

느낀점

그냥 단순히 제너레이터에 대해서 실행의 흐름을 조절할수 있다는 정도만 알고 있었는데 이번에 TIL을 작성하면서 흐름이 어떠한 방식으로 넘어가는지 더 생각해 볼 수 있는 계기가 되었다!