Redux-Saga를 사용하기 위해서는 Generator를 필수로 알아야 하기 때문에 정리
Javascript ES6에서 도입
제너레이터 함수는 이터러블을 생성하는 함수
이터러블? 자료를 반복할 수 있는 객체
제너레이터 함수를 사용하면 간편하게 이터러블을 구현
제너레이터 함수는 비동기 처리에 유용하게 사용
function* test() {
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
}
const t = test();
console.log(t.next()); // { value: 1, done: false }
console.log(t.next()); // { value: 2, done: false }
console.log(t.next()); // { value: 3, done: false }
console.log(t.next()); // { value: 4, done: false }
console.log(t.next()); // { value: 5, done: false }
console.log(t.next()); // { value: undefined, done: true }
* yield :
제너레이터를 멈추거나 다시 실행하는데 사용된다.
yield는 표현식(expression)으로도 작성할 수도 있는데,
표현식을 작성할 경우 왼쪽에 결과값을 할당한다.
* next :
이터레이터에서 활용된 next 를 제너레이터에서 동일한 개념으로 사용할 수 있다.
한가지 달라진 점은 next를 통해 값을 제너레이터로 전달할 수 있다는 점이다.
function* returnTest() {
const a = yield;
const b = yield a;
const c = yield b;
return c;
}
const t = returnTest();
console.log(t.next()); // { value: undefined, done: false }
console.log(t.next(10)); // { value: 10, done: false }
console.log(t.return(30)); // { value: 30, done: true }
console.log(t.next(20)); // { value: undefined, done: true }
// 위에서 t.return(30) 대신 next를 사용 시 아래는 { value: 20, done: false }
* return :
yield 문은 return을 사용하지 않으면 제너레이터를 끝내지 않는다.
그 말은 return을 사용할 경우,
yield 문이 남아있더라도 제너레이터를 종료하고 값을 반환한다는 뜻이다.
function* errorTest() {
try {
yield 1;
yield 2;
yield 3;
} catch (e) {
console.error(e);
}
}
const t = errorTest();
console.log(t.next()); // { value: 1, done: false }
console.log(t.throw("Error!")); // Error!
console.log(t.next()); // { value: undefined, done: true }
console.log(t.next()); // { value: undefined, done: true }
* throw :
throw는 return과 마찬가지로 실행 즉시 종료 시키며,
다른 점은 Error를 발생시킨다는 점이다.
제너레이터를 사용할때 try...catch문으로 에러를 잘 핸들링 하는 것이 중요히다.
Reference
https://uzihoon.com/post/f27b7310-64e0-11ea-84dc-878832775ccf