Observable 이란?

옵저버블이란 연속적인 비동기 작업을 도와주는 도구이다.

• 연속적인 비동기 작업이란? → 요청을 빠르게 여러번 보내는 것!

연속적인 페이지 클릭 혹은 연속적인 검색어 변경을 예로 들 수 있다.
게시글 목록페이지에서 페이지 요청을 여러번 빠르게 했을 경우, 백엔드에서 누른 순서대로 응답을 보내지 않는다.
예를 들어, 3번 페이지를 요청했다가 빠르게 5번 페이지를 요청한다고 치자. 그럼 3번 페이지 요청을 취소 후, 5번 페이지를 보내줘야하는데 백엔드에서는 3번 페이지를 보여주게 된다.
이런 경우에는 3번 페이지 요청을 취소해줘야 하는데 이때 Promise가 아닌 observable을 사용하여 처리한다.

실습

⚠️ 설치목록

yarn add zen-observable

yarn add @types/zen-observable --dev

yarn add graphql-request

import {from} from 'zen-observable'

export default function (){

	const onClickButton = ()=>{
		// new promise(()=>{})
		// new observable(()=>{})

		// from을 hover해보시면 observable이 나온다.
		from(["","",""]) // fromPromise
			.flatMap((el)=> from([`${el} 결과에 qqq 적용`,`${el} 결과에 zzz 적용`]))
			.subscribe((el)=>(console.log(el)))
	}

	return <button onClick={onClickButton}> 클릭! </button>
}