퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 옵저버블[Observables]

옵저버블[Observables]

Observables는 퓨즈를 효과적으로 이해하기 위한 핵심 개념입니다. Observables는 데이터 모델이 변경될 때마다 UI를 자동으로 업데이트 합니다. 또한 뷰 모델을 설명하는 데 매우 유용합니다. 이는 데이터 모델을 보기 쉬운 형식으로 매핑하는 것을 의미합니다. 중괄호 구문 ({})을 사용하여 Observable에 데이터를 바인딩하면 Observable이 변경 될 때마다 UI를 업데이트하는 구독(subscription)이 자동으로 생성됩니다. 이 문서는 FuseJS/Observable API를 이해하고 사용하는 방법을 간략히 소개합니다.

우리가 무엇을 볼 것인지에 대한 아이디어를 얻을 수 있는 아주 간단한 예가 있습니다:

<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        module.exports.myValue = Observable(1);
    </JavaScript>

    <Text Value="{myValue}" />
</App>

비디오 튜토리얼

Observable 작업에 대한 훌륭한 소개 비디오를 보십시오:

Observable 사용하기

Observable은 단일 값을 유지하거나 0개 이상의 요소가 있는 값 리스트로 처리될 수 있습니다. Observable의 값이 변경되면 모든 가입자에게 자동으로 통보됩니다. 구독자(subscribers)와 구독(subscriptions)의 개념에 대해서는 이 기사 뒷부분에서 자세히 설명합니다.

Observable 모듈을 가져오는 것부터 시작합니다:

var Observable = require("FuseJS/Observable");

Observable은 Observable 함수에 0개 이상의 초깃값을 대입하여 생성합니다.

var emptyObservable = Observable();
var singleValueObservable = Observable(true);
var listObservable = Observable(1,2,3,4);

var singleValueObservable = Observable(10); // .value == 10 이 됩니다.
singleValueObservable.value = 20; // .value == 20 이 됩니다.
var theValue = singleValueObservable.value; // theValue는 20이 됩니다.

Observable을 목록으로 사용할 때 .add 및 .remove 메소드를 사용하여 아이템을 추가 및 제거할 수 있습니다.

var multiValueObservable = Observable(1,2);
multiValueObservable.add(5); // 1,2,5
multiValueObservable.remove(2); // 1,5

또한 우리는 집합적으로 “reactive operators[반응 연산자]” 라고 부르는 일련의 방법을 사용하여 Observable에 다양한 변형을 적용할 수 있습니다. 이 연산자는 새로운 Observable을 반환하는 Observable 객체에서 호출할 수 있는 메소드입니다. 이 문서의 뒷부분에서 자세히 다룹니다. 다음 예제는 .map 연산자를 사용하여 someNumbers Observable에 있는 모든 숫자를 제곱합니다. Map은 제공된 함수를 사용하여 Observable의 모든 아이템을 한 형식에서 다른 형식으로 변환합니다.

var someNumbers = Observable(1,2,3,4); // 1,2,3,4
var someNumbersSquared = someNumbers.map(function(x){ return x * x; }); // someNumbersSquared는 결국 2,4,6,8이 됩니다.

모든 반응 연산자는 새로운 Observable을 반환하기 때문에 여러 개의 반응식을 연속적으로 배치하여 반응 연산자의 긴 체인을 만들 수 있습니다.

var someNumbers = Observable(1,2,3,4);
var someTransformedNumbers = someNumbers
    .map(function(x){ return x * x; })
    .where(function(x){ return x < 8; })
    .map(function(x){ return -x; }); // 결국 -2,-4,-6이 됩니다.

이 예제에 대해 새로운 퓨즈 사용자들이 많이 겪는 주의점은 someTransformedNumbers는 실제로 선언한 명령문 바로 다음에 데이터를 포함하지 않는다는 것입니다:

var someNumbers = Observable(1,2,3,4);
var someNumbersSquared = someNumbers.map(function(x){ return x * x; });
console.log("SquaredNumbers length: " + someNumbersSquared.length); // 0 이 출력됩니다.

그 이유는 Observables가 체인 끝에 가입자가 없으면 데이터를 전파하지 않기 때문입니다. 구독(subscriptions) 방법에 대해 자세히 알아 보려면 계속 읽으십시오.

완전한 참조 문서는 Observable API 문서를 확인하십시오.

Observable의 변경 사항 구독

Observable에 대해 이해하는 것이 정말 중요합니다. Observable을 시작하기 전에 적어도 한 명의 가입자가 있어야 한다는 것입니다. Observable에 가입하려면 다음과 같은 몇 가지 방법이 있습니다.

UX 마크업에서 데이터 바인딩하기

중괄호 구문을 사용하여 UX에서 Observable을 데이터 바인딩 할 때마다 자동으로 구독(Subscription)을 만듭니다. 이것은 구독을 만드는 가장 일반적인 방법입니다. 데이터 바인딩에 대한 자세한 내용은 이 문서를 참조하십시오.

.onValueChanged(module, func(item))

경우에 따라 Observable의 변경에 대한 응답으로 명령형 코드를 실행하는 데 관심이 있을 수 있습니다. 그럴 경우, .onValueChanged(module, func(item)) 함수를 사용하여 구독하면 됩니다. module 매개 변수를 사용하면 이 구독의 수명을 모듈의 수명에 연결할 수 있습니다. 대부분의 경우 우리는 현재 있는 모듈을 전달합니다.

var myObservable = Observable(1,2,3);
myObservable.onValueChanged(module, function(item) {
    // 작업 코드
});

.addSubscriber(func)

마지막으로 .addSubscriber(func(item)) 메서드를 사용하여 구독을 명시적으로 추가할 수도 있습니다. .addSubscriber 사용의 단점은 .removeSubscriber를 사용하여 더 이상 구독이 필요하지 않을 때 수동으로 구독을 제거해야 한다는 것입니다. 사용자 지정 반응 연산자를 정의하지 않는 한 .onValueChanged를 사용하시기 바랍니다. 여기서는 모든 것을 설명하기 위해 언급했습니다.

반응 연산자(Reactive operators)

반응 연산자는 새로운 Observable을 생성하는 Observable에 대해 호출할 수 있는 메서드입니다. 그런 다음 반응 연산자의 추가 어플리케이션을 구독하거나 변형할 수 있습니다. 이 메소드에 대해 알아야 할 중요한 점은 선언적으로 작동한다는 것입니다. Observable에 반응 연산자를 적용한다고 해서 실제로 변환이 적용되는 것은 아닙니다. Observable 소스에서 값이 제공될 때 값이 통과하는 “파이프 라인”을 설정하기만 합니다.

Observable은 “푸시 기반” 모델을 사용합니다. 푸시 기반 모델의 다른 대안은 “풀 기반” 입니다. 이 시나리오에서 UI는 자신을 업데이트하려고 할 때 데이터 소스에 최신 데이터를 요청해야 합니다. 푸시 기반 접근 방식에서 데이터 모델은 변경될 때마다 UI에 대한 값을 밀어 넣습니다.

이 “푸시 기반” 접근 방식을 알고 있어야 하는 것은 앞서 언급한 것처럼 누군가가 이러한 푸시 알림에 가입하지 않으면 실제로 값을 푸시하지 않는 것입니다.

Observable이 값을 생산한다는 것은 무엇을 의미합니까?

우리는 일반적으로 Observable을 소스(또는 소스 집합)에서 대상(또는 대상 집합)으로 흐르는 값의 흐름으로 생각합니다. 그 방식을 따라, .map, .where 및 .combine과 같은 반응 연산자를 사용하여 스트림을 변형하고 필터링하고 다른 스트림과 결합할 수 있습니다(여기에서 모든 연산자에 대한 정보를 찾으십시오).

var source = Observable(2);

var destination = source.map(function(x) {
    return x * x;
}).where(function(x) {
    return x < 50;
});

위의 코드에서 단일 초깃값으로 Observable 소스를 만듭니다. 숫자 2입니다. 그런 다음 반응 연산자 .map을 사용하여 숫자를 제곱하는 “매핑 함수”로 값을 변환합니다. 마지막으로 반응 연산자 .where를 사용하여 Observable을 필터링하면 50보다 작은 값만 더 전파됩니다. .where 연산자는 true 또는 false를 반환해야 합니다. 값을 전파할 수 있으면 true이고, 그렇지 않으면 false입니다.

[[ 동영상 강좌 ]]

Was this article helpful to you? Yes No 1

How can we help?