rxjs observable 함수에 대해 궁금한게 있습니다.

Question

const source &#61; Rx.Observable.from([1, 2, 3, 4, 5]); const subscribe &#61; source.subscribe(val &#61;> console.log(val)); from가 observable를 생성하는 함수이고 subscribe가 listening 을 위해 대기하는 핸들러 함수라면 코드 순서가 이해가 되지 않아서 여기에 글을 올리게 되었습니다. 보통 listening 등록을 가장 먼저 하고 그 listening을 실행하는 함수가 뒤에 오지 않나요? 마치 jQuery에서$('btn').click(function() { ... 실행}으로 subscribe를 시키고 나중에 유저가 버튼을 클릭 때 해당 함수가 트리거 되는 거처럼요위의 observable로 대비해보면subscrbie가 jquery의 클릭이벤트 등록이고from인 emit 함수가 유저가 클릭할 순간이 될거 같은데순서가 이해되지 않아서 여기에 글을 올리게 되었습니다. 감사합니다

스텁 · Accepted Answer

observable과 콜백은 사용되는 방식과 개념에 차이가 있어서 1대1로 대비 시키기면 다른점이 있을거 같습니다. 또다른 JQuery로 예를 들어보면 JQuery/AJax만 하더라도 여기에는 말씀하신 이벤트 리스너 등록 없지 않나요? 그런데 observable은 dom event처리에서도 대체할수 있지만 아래와 같은 http request에도 적용될수 있는 차이가 있습니다. $.ajax({ type: &#34;POST&#34;, url: url, data: data, success: success, dataType: dataType });observable 문서에 보면 ' representation of any set of values over any amount of time' 이라고 되어있고 다른 문서에서는 Observable은 시간요소를 포함하는 스트림/배열의 개념이다라고 설명한 부분이 있는데 특정 시간에 걸쳐서 발생되는 데이터를 처리하되 개발자는 시간요소까지 생각안해도 된다. 그렇기 때문에 데이터 출처에서 계속적으로 발생하는 데이터의 흐름을 일반적인 배열 데이터 형으로 생각하면서 작성할수 있습니다. 콜백과의 차이점은 데이터 출처를 합칠수도 있고 여러개의 데이터 출처를 사용할수도 있는 차이점이 있고 fail시 리트라이등 여러가지 콜백과는 다른 기능들이 있습니다. 어떤곳에서 발생하는 데이터를 observable이라는 형태로 만들어버리면 그다음부터는 map, filter등을 적용하여 데이터를 사이드 이펙트 없이 원하는 모양으로 정의 할수 있고, cold observable / hot observable 이라는 용어로 표현을 하던데 subscribe전까지는 콜드 상태이고 subscribe 해야 그 시점에 hot으로 전환되어 그 시점부터 데이터가 흐릅니다. 저도 그때그때 메모한것을 짜깁기 한거라 좀 간결하진 않지만 이해의 실마리가 되었으면 좋겠네요.

Honowis · Answer

우선 source 의 예를 언급하신 jQuery 예제와 맞게 변경 해 보았습니다. const btn &#61; document.querySelector('btn');const source &#61; Rx.Observable.fromEvent(btn, 'click'); 위의 source 와 jQuery 의 클릭이벤트 를 비교 해 본다면 btn 은 $('btn) 과 같고,source 는 이벤트를 할당하며,subscribe 는 jQuery 의 콜백과 같다 할 수 있으니 동일한 순서라고 볼 수 있겠네요.

하비루하비루 · Answer

#스텁음.. 일단 써봐야 그 개념에 대해 좀더 이해할 수 있을거같습니다.콜백과 비슷한 듯 하면서도 다른 특징중에 하나인 개념 cold / hot observable이라는 표현을 보면 이 부분을 컨트롤 하기 위한 공부가 따로 필요하겠네요 그리고 jQuery / ajax 부분도 콜백 함수를 success에 등록 시키지 않나요 ? 말씀감사합니다 :)

rxjs observable 함수에 대해 궁금한게 있습니다.

3개의 답변

Q&A 목록