본문 바로가기

React

TIL no.40 - * generator 이해하기 : redux-saga를 위한

* generator 는 ES6에서 등장한 개념으로 함수의 실행을 중간에 멈추고 재개할 수 있게 하는 기능입니다.

실행을 멈출 때 값을 전달할 수 있기 때문에 반복문에서 제너레이터가 전달하는 값을 하나씩 꺼내서 사용할 수 있습니다.

 

 

generator 생성

- 제너레이터는 * 와 함께 정의된 함수가 반환하는 객체입니다.

- yield 와의 사용을 주로 볼 수 있는데 yield를 사용하면 함수의 실행을 break와 같은 기능으로 멈출 수 있습니다.

   yield의 사용으로 return을 여러 번 할 수 있습니다.

 

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

const Generator = GeneratorFunctuin();

console.log(Generator.next().value); //1
console.log(Generator.next().value); //2
console.log(Generator.next().value); //3

제너레이터 함수 객체 안에는

{value: 1, done: false}

{value: 2, done: false}

{value: 3, done: true}

value와 done이 있는데

done은 yield를 만났을 때 false가 되고 만나지 못하면 true가 됩니다.

또한 return 메소드를 호출하면 해당 데이터 객체의 done 속성값도 true를 반환합니다.

이후에 next 를 호출해도 done은 참 값을 반환합니다.

 

function* GeneratorFunc() {
	try{
    	console.log('1');
        yield 10;
        console.log('2');
        yield 20;
        console.log('3');
        return 'done';
       }
       catch(e) {
       	console.log(e);
       }
     }
     
     const gen = GeneratorFunc();
     
     console.log(gen.next());
     console.log(gen.throw('error'));

위와 같이

catch는 throw 메소드로 받습니다.

이 때 데이터 객체의 done 속성 값은 true가 됩니다.