* 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가 됩니다.
'React' 카테고리의 다른 글
TIL no.57 - React 성능 최적화를 고려한 컴포넌트 만들기 (0) | 2021.02.21 |
---|---|
TIL no.41 - React 에서 특정 Dom 에 접근하기 : useRef, ref (0) | 2020.12.05 |
TIL no.36 - React Hooks useEffect 의존성 배열 ?! (0) | 2020.11.15 |
TIL no.35 - 더보기 버튼 만들기 ellipsis (0) | 2020.11.08 |
TIL no.34 - How to fetch api in React Hooks? (0) | 2020.11.08 |