ES6부터 도입된 기능으로, 언어나 라이브러리 차원에서 제공되는 반복(iteration)과 비동기 흐름 제어를 유연하게 다룰 수 있게 해준다.
[ 필요성 ]
자바스크립트의 핵심 개념, 이터레이터와 제너레이터
데이터 컬렉션을 효율적으로 다루기 위해 자바스크립트는 이터레이터(Iteratior)와 제너레이터(Generator)라는 두 가지 개념을 제공한다.
이터레이터는 "반복 가능한" 객체들을 위한 프로토콜을 정의하며,
제너레이터는 이터레이터를 사용하여 값을 순차적으로 생성하는 함수이다.
이 두 개념은 자바스크립트에서 비동기 처리, 데이터 스트림 처리 등 다양한 상황에서 유용하게 사용된다.
[ 정리 ]
1. 데이터를 순회하는 표준화된 방식 제공
2. 커스텀 반복 로직 구현
- 기본 자료구조 외에 사용자 정의 객체에 대해서도 원하는 방식의 순회 로직을 직접 정의할 수 있다.
- 예를 들어, 특정 조건이나 별도의 계산 로직을 거쳐서 다음 요소를 결정해야 한다면, 이터레이터를 활용해 유연하게 처리할 수 있다.
3. 코드 흐름을 일시중단하고 재개하는 기능
- 제너레이터는 함수 실행 도중 yield 키워드를 통해 실행을 일시중단하고, 필요한 시점에 next() 호출로 다시 재개할 수 있는 특별한 함수이다.
- 이터레이터를 직접 생성해 내는 역할도 할 수 있고, 동기/비동기 제어 흐름에도 활용할 수 있다.
4. 비동기 로직 간소화 (Async/Await 탄생 배경)
- 제너레이터는 원래 복잡한 비동기 처리 흐름을 보다 간결하게 표현하기 위해 많이 사용했다.
5. 가독성과 유지보수성 향상
- 복잡한 반복 로직이나 비동기 흐름 처리 시, 제너레이터를 활용하면 여러 단계로 나뉜 코드를 직관적으로 표현할 수 있어 가독성이 향상된다.
- 또한 이터레이터를 통해 순회 로직을 캡슐화하면, 향후 코드 수정이나 확장시에 유지보수가 훨씬 수월해진다.
'Frontend (Next.js Tailwind Typescript) > Next.js' 카테고리의 다른 글
Lazy loading with dynamic import (0) | 2025.02.13 |
---|---|
Next.js에 remark-breaks 플러그인 설치 (1) | 2024.09.29 |
create-next-app (0) | 2024.02.18 |
fetch의 기본 사용법 (0) | 2024.02.16 |
Nextjs Routing(Parallel Routes, Intercepting Routes) (0) | 2024.01.19 |