자바스크립트 + 리액트 디자인 패턴

165

Chapter 07_

자바스크립트 디자인 패턴

// 새로 발행된 태그를 구독하고 이를 사용하여 검색 쿼리를 수행합니다.

// 데이터가 반환되면, 이 데이터를 애플리케이션의 나머지 부분이

// 사용할 수 있도록 발행합니다.

// 데이터 구조에서 개별 변수로 값을 분해할 수 있게 하는

// 구조 분해 할당 문법을 사용했습니다.

$.subscribe('/search/tags', (e, tags) => {

$.getJSON(

'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?',

{

tags,

tagmode: 'any',

format: 'json',

},

// 함수 매개변수로써의 구조 분해 할당

({ items }) => {

if (!items.length) {

return;

}

// 객체 생성 시 객체 키와 동일한 변수 이름에 대한 단축형 속성 이름

$.publish('/search/resultSet', { items });

}

);

});

})(jQuery);

리액트 생태계에서의 관찰자 패턴

RxJS

는 관찰자 패턴을 사용하는 대표적인 라이브러리입니다.

RxJS

의 공식 문서

20

에서는 다

음과 같이 설명합니다.

ReactiveX

는 관찰자 패턴, 이터레이터 ...