[자바스크립트 ES6+] 제너레이터와 이터레이터 (+Redux-Saga)

holim0·2021년 1월 31일
4

JavaScript

목록 보기
3/4
post-thumbnail

오늘은 제너레이터와 이터레이터에 대해서 알아보겠습니다! 🧐


제너레이터와 이터레이터

➡️ 제너레이터는 이터레이터이자 이터러블을 생성하는 함수입니다. (이터레이터를 리턴)

일반 함수는 최대 하나의 값만을 반환하지만 **제너레이터(generator)**를 사용하면 여러 개의 값을 필요에 따라서 하나씩 반환(yield)할 수 있습니다.

  • 제너레이터는 순회할 수 있는 값을 만들어 냅니다.

  • 제너레이터를 만들려면 '제너레이터 함수’라 불리는 특별한 문법 구조, function*이 필요합니다.

[예시]


function* gen() {
    yield 1;
    if (false) yield 2;
    yield 3;
    return 100; // done이 true일 때 나오는 값이다. 
}

let iter = gen();  // 이터레이터가 리턴된다. 

console.log(iter.next()); // 1

➡️ next() 메서드를 사용하는 것으로 보아 제너레이터는 이터러블입니다.

따라서 for .. of 로 인해 순회할 수 있습니다.


for (const i of gen()) console.log(i); // 순회가 가능하다. 

전개 연산자

  • 제너레이터는 이터러블 객체이기 때문에 제너레이터에서도 전개 연산자를 사용할 수 있습니다.

function* generater() {
  yield 1;
  yield 2;
  yield 3;
}

let sequence = [0, ...generater()];

console.log(sequence); // 0, 1, 2, 3


Redux-Saga

➡️ Redux-Saga에서 Saga가 바로 제너레이터 함수를 의미합니다.

Redux-Saga를 사용한다는 것은 Redux-Saga Middleware에 Saga를 등록하고 수행시킨다는 의미입니다.

미들웨어는 Saga에게 yield 값을 받아서 또 다른 어떤 동작을 수행할 수 있습니다. Saga는 명령을 내리는 역할만 하고, 실제 어떤 직접적인 동작은 미들웨어가 처리할 수 있습니다.

이펙트

✅ 이펙트는 미들웨어에 의해 수행되는 명령을 담고 있는 자바스크립트 객체입니다.

all, fork, takeLatest, put, call 이 모두 이펙트 생성자입니다.

**Saga는 명령을 담고 있는 이펙트라 부르는 순수한 객체를 yield하고 미들웨어는 이런 명령어들을 처리하고 그 결과를 Saga에게 돌려줍니다.
**

💡 Redux-Saga에서는 제너레이터의 원리를 이용해서 특정 액션이 발생했을 때 원하는 코드를 실행시켜주는 식으로 작동이 됩니다.


마무리

제너레이터와 이와 관련된 상태관리 라이브러리인 Redux-saga에 대해서 살펴보았습니다.

Redux-saga를 쓰면서 제너레이터 함수의 작동원리를 아는 것이 중요합니다.


Reference

https://meetup.toast.com/posts/140

profile
매일 조금씩 성장하고 있는 개발자입니다.

0개의 댓글