오늘은 제너레이터와 이터레이터에 대해서 알아보겠습니다! 🧐
제너레이터와 이터레이터
➡️ 제너레이터는 이터레이터이자 이터러블을 생성하는 함수입니다. (이터레이터를 리턴)
일반 함수는 최대 하나의 값만을 반환하지만 제너레이터(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
