링크텍스트
redux-saga의 경우엔, 액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용합니다.여기서 특정 작업이란, 특정 자바스크립트를 실행하는 것 일수도 있고, 다른 액션을 디스패치 하는 것 일수도 있고, 현재 상태를 불러오는 것 일수도 있습니다.
redux-saga 에서는 제너레이터 함수를 "사가" 라고 부릅니다.
redux-saga 의 특징 (redux-thunk가 안되는)
1. 비동기 작업을 할 때 기존 요청을 취소 처리 할 수 있습니다.
2. 특정 액션이 발생했을 때 이에 따라 다른 액션 디스패치되게 하거나, 자바스크립트 코드를 실행할 수 있습니다.
3. 웹소켓을 사용하는 경우 Channel이라는 기능을 사용하여 더욱 효율적으로 코드를 관리할 수 있습니다.
4. API 요청이 실패했을 때 재요청하는 작업을 할 수 있습니다.
'redux-saga/effects' 에는 다양한 유틸함수들이 있다
put - 새로운 액션 디스패치 가능하다.
takeEvery, takeLatest - 액션 모니터링하는 함수 특정 액션 타입에 대하여 디스패치되는 모든 액션을 처리하는 것. / 특정 액션 타입에 대하여 디스패치된 가장 마지막 액션만을 처리하는 함수이다. 예를들어, 특정 액션 처리 도중에 동일한 타입의 새로운 액션이 디스패치되면 기존에 하던 작업을 무시 처리하고 새로운 작업을 시작한다.
Generator 문법이란? / 시간날때 더 보기!
링크텍스트
함수를 특정 구간에 멈춰놓고 원할때 다시 동작하게 가능하다. 또한 결과값을 여러번 반환할 수 있다. 여러개의 값을 필요에 따라 하나씩 반환 (yield)할 수 있다. 제너레이터와 이터러블 객체를 함께 사용하면 손쉽게 데이터 스트림을 만들 수 있다.
반면 일반함수는 하나의 값 (혹은 0개의 값)을 반환한다.
동작방식은 일반함수와 다르다. 제너레이터 함수를 호출하면 코드가 실행되지 않고, 대신 실행을 처리하는 특별 객체, '제너레이터 객체'가 반환된다. / 제너레이터는 이터러블이다.
next()를 호출하면 가장 가까운 yield 문을 만날 때까지 실행이 지속됩니다(value를 생략할 수도 있는데, 이 경우엔 undefined가 됩니다).
next()는 항상 두 프로퍼티를 가진 객체를 반환한다 -> value(산출값), done(함수 코드 실행이 끝나면 true, 아니면 false)
for..of 이터레이션이 done: true일 때 마지막 value를 무시하기 때문입니다. 그러므로 for..of를 사용했을 때 모든 값이 출력되길 원한다면 yield로 값을 반환해야 합니다.
function* generateSequence() {
yield 1;
yield 2;
yield 3;
}
let generator = generateSequence();
for(let value of generator) {
alert(value); // 1, 2, 3
}제너레이터는 이터러블 객체이므로 제너레이터에도 전개 문법(...) 같은 관련 기능을 사용할 수 있습니다.
iterable 객체란? (:반복 가능한)
링크텍스트
배열을 일반화한 객체이다. 이터러블 개념을 사용하면 어떤 객체이든 반복문 적용이 가능합니다.
이터러블 객체의 핵심은 '관심사 분리'에 있다.
문자열과 배열은 가장 광범위하게 쓰이는 내장 이터러블이다.
이터레이터를 명시적으로 호출하는 경우는 많지 않지만, for...of보다 반복 과정을 더 잘 통제할 수 있다는 장점이 있다. 중간에 멈추고 재시작을 하는등 반복 과정을 여러개로 쪼개는 것이 가능하다.
이터러블과 유사배열은 무엇인가?
- 이터러블은 메서드 Symbol.iterator가 구현된 객체이다.
- 유사배열은 인덱스와 length 프로퍼티가 있어서 배열처럼 보이는 객체이다.
이터러블과 유사 배열은 대개 배열이 아니기 때문에 push, pop 등의 메서드를 지원하지 않음
-> 범용 메서드 array.form 로 이터러블이나 유사 배열을 받아 진짜 array로 만듦. 이 과정을 거치면 유사배열 혹은 이터러블에 배열 메서드 사용이 가능하다.
let arrayLike = {
0: "Hello",
1: "World",
length: 2
};
let arr = Array.from(arrayLike); // (*)
alert(arr.pop()); array.form은 객체를 받아 이터러블이나 유사 배열인지 조사한다. 맞을 경우 새로운 배열을 만들고 객체의 모든 요소를 새롭게 만든 배열로 복사한다.
