react meteor data

react에서 meteor data를 가져오는 방법을 설명한다.

기본적으로 meteor data는 hoc pattern을 따른다.

참조: https://reactjs.org/docs/higher-order-components.html

다음과 같이 withTracker를 이용하여 presentational component의 props로 data를 전달한다.

import { withTracker } from 'meteor/react-meteor-data'

import InfoView from './InfoView.coffee'
import { Links } from '../../../api/links/links.coffee'

export default InfoData = withTracker(=>
  linksHandle = Meteor.subscribe 'links'

  isLoading: !linksHandle.ready()
  links: Links.find().fetch()
) InfoView

component 구조는 순수 view만 담당하는 component와 기능이 확장된 component로 나뉜다.

withTracker로 한번 wrapped된 component는 기능이 확장된 component가 되고 meteor에서는 container component(smart component)라고 명명한다.

naming convention

순수 view에 해당하는 component는

[component name]View.coffee

로 file name을 명명한다.

meteor data가 붙은 component는

[component name]Data.coffee

로 file name을 명명한다.

그 밖의 handler에 logic이 들어가거나 이외의 기능이 확장된 component는

[component name]Ex.coffee

로 file name을 명명한다.