Observable, flatMap( )

yiwoojung·2022년 8월 16일
0

{C} Codecamp FE 06

목록 보기
17/21
post-thumbnail

Promise ?
비동기 작업 도와줘

Observable ?
연속적인 비동기 작업 도와줘


apollo-setting이 업데이트 되면서 내부 소스코드가 Observable 기반으로 변경되었다.그래서 Promise 형태를 그대로 return할 수 없었고 Promise를 Observable로 변경해야 했다.

그렇다면 observable이 뭘까?

Observable

observable은 연속적인 비동기 작업을 하나로 묶어준 것이다.
예를들어 Observable은 다음에서 사용할 수 있다.

1. 연속적인 페이지 클릭
2. 연속적인 검색어 변경 

이렇게 되면 먼저 일어난 하나의 비동기 작업을 취소할 수 있다.
기존에 요청했던 비동기 작업을 취소하는 과정은 promise로는 쉽지 않다. 그래서 이럴 때 Observable을 활용할 수 있다.


이런 것들을 활용한 프로그래밍을 반응형 프로그래밍(reactive programming - observable 활용 등) 혹은 함수형 프로그래밍(함수들을 연결지어서 프로그래밍 하는 방식 - 함수형 컴포넌트와 다름)이라고 부른다.
이걸 쉽게 해주는 라이브러리에는 rxjs(reactive extension js), zen-observable(apollo-client 내에 기본으로 깔려있음) 등등 이 있다.


Promise로 코드를 짰지만 이것을 Observable 형태로 바꿔서 내보내야 하는데 그때 사용할 수 있는 것이 fromPromise이다.
이때 사용하는 flatMap( )도 알아보자.

FlatMap

우선 js에서 사용하는 flatMap 메서드와는 다른 개념이다.
zen-observable에서 기본으로 제공하는 메서드일 뿐이다.


observable에서 flatMap하면 다음 로직을 실행 시킨다.


이와같이 로그인 로직을 실행할 때도 graphQLErrors를 가져올 때 promise 를 observable 형태로 바꿔서 return 해줘야 한다.
그때 return 값을 fromPromise로 감싸면 observable 형태가 된다.
이후에 flatMap을 사용하면 fromPromise 끝나고 빠져나온 결과에 순서대로 foward가 실행되는 것이다.

profile
프론트엔드 개발자

0개의 댓글