ES6 제너레이터 함수

redux-saga 에서는 ES6의 제너레이터 함수 문법을 사용한다.

사실 이 문법에 대해 딱히 몰라도 redux-saga를 사용법만 알면 큰 문제가 되지 않지만

원리를 알면 아주 조금은 도움이 된다.

​

제너레이터 함수는 문자그대로 발전기를 만들어주는 것으로

해당 함수를 최초 호출할 경우 함수 내부 구문이 실행되는 것이 아니라

내부 구문을 실행시킬 수 있는 제너레이터 객체를 리턴하게 된다.

 

이 문법의 핵심기능은 함수를 실행할 때 

함수를 특정구간에 멈춰 놓았다가 다음 호출에 이어서 실행시킬 수 있다는 것이다.

​

제너레이터 함수는 아래와 같이 정의한다.

function* generatorFunc(){
	console.log('1 구간 진입');
  	let param = yield;

	console.log('1구간에서 입력된 값: ' + param);  
  	console.log('2 구간 진입');
	param = yield;
  
 	console.log('2구간에서 입력된 값: ' + param);  
  	console.log('3 구간 진입');
	param = yield;

	console.log('3구간에서 입력된 값: ' + param);  
  	console.log('제너레이터 종료');
    
	yield '끝';
}

 

사용은 아래와 같이 한다.

const test = generatorFunc();

test.next(111);
// 1 구간 진입
// {value: undefined, done: false}

test.next(222);
// 1구간에서 입력된 값: 222
// 2 구간 진입
// {value: undefined, done: false}

test.next(333);
// 2구간에서 입력된 값: 333
// 3 구간 진입
// {value: undefined, done: false}

test.next(444);
// 3구간에서 입력된 값: 444
// 제너레이터 종료
// {value: "끝", done: false}

test.next(555);
//{value: undefined, done: true}

​

보면 알겠지만 제너레이터 함수를 정의할때는 function* 를 사용하며

제너레이터 객체 생성후 next 를 호출할 경우 yield가 선언된 행에서

순차적으로 흐름을 멈춘다.

 

제너레이터 함수 안에서는 yield로 next 함수의 인자를 받아올 수 있고

next 함수는 아래와 같은 포맷의 객체리터럴을 고정적으로 리턴한다.

{value: undefined, done: false}

이 때 value 값은 제너레이터 함수에서 yield '111'; 구분으로 지정된 값이며

done는 제너레이터 함수의 종료 여부를 의미한다.