Observable이란?

• 연속적인 비동기 작업이란?
  • 요청을 짧은 시간에 여러 번 보내는 것을 말합니다.

페이지네이션에서 3페이지를 요청했다가 바로 5페이지를 요청하면, 3페이지 요청은 취소하고 5페이지 결과만 보여 줘야 합니다. 그렇지 않으면 늦게 도착한 3페이지 결과가 화면에 표시되어 사용자에게 혼란을 줄 수 있습니다.

이런 경우는 Promise로 처리하기 어렵기 때문에 Observable을 사용합니다.

yarn add zen-observable

## TypeScript는 추가
yarn add @types/zen-observable --dev

const onClickButon = () => {
    // new Promise(() => {}) // 기존 프로미스를 만들때 쓰던방법
    // new Observable(() => {})

    // from은
    // prettier-ignore
    from(["1번 useQuery", "2번 useQuery", "3번 useQuery"]) // fromPromise
      .flatMap((el: string) => from([`${el} 결과에 qqq 적용`, `${el} 결과에 zzz 적용`]))
      .subscribe((el) => console.log(el))
  };