vulcanJS - 9. Route 연결하기

Route들끼리 연결에 대해 알아보자고 지난 시간에 말씀드렸는데
Vulcan에선 React-router(https://reacttraining.com/react-router/web/api/Link)를 사용하므로 그 규칙을 그대로 따르면 됩니다.
<Link to='경로명'>표시할 이름</Link> 형식으로 씁니다.
PostsSingleComponent 에 <Link to='/'>to Home</Link> 를 추가하여 처음으로 돌아가도록 합시다.

import React, { Component } from 'react';
import { Link } from 'react-router';
import { registerComponent, withDocument } from 'meteor/vulcan:core';
import Posts from "../modules/posts/collection.js";
class PostsSingleComponent extends Component {
  render () {
    return (
      <div>
        <h1>{this.props.document.title}</h1>
        <pre>
          {this.props.document.body}
        </pre>
        <Link to='/'>to Home</Link>
      </div>
    );
  }
}
registerComponent('PostsSingleComponent', PostsSingleComponent, [withDocument, {
  collection: Posts
}]);
export default PostsSingleComponent;

평범합니다. 이제 본문 글 목록에서도 상세로 들어올 수 있도록 제목마다 연결해 봅니다.

PostsListComponent에서 <div key={o._id}>{o.title}</div> 이 부분에 <Link>를 적용하면 아래와 같습니다.

import React, { Component } from 'react';
import { Link } from 'react-router';
import { registerComponent, withList } from 'meteor/vulcan:core';
import Posts from "../modules/posts/collection.js";
class PostsListComponent extends Component {
  render () {
    return (
      <div>
        {
          this.props.results
            && this.props.results.map(o=>
              <div key={o._id}>
                <Link to={`/posts/${o._id}`}>{o.title}</Link>
              </div>
            )
        }
      </div>
    );
  }
}
registerComponent('PostsListComponent', PostsListComponent, [withList, {
  collection: Posts
}]);
export default PostsListComponent;

o._id를 문자열 안에 넣기 위해 `(backtick)을 사용했습니다.

<Link to={`/posts/${o._id}`}>{o.title}</Link> 이렇게 접근하는 것이지요.

근데, 실제로 목록에서 상세로 연결하려고 눌러보면 생각대로 한번에 잘 들어가지지 않습니다.

어떻게 된 일 일까요?

콘솔 창에서 보면

PostsSingleComponent.jsx:11 Uncaught TypeError: Cannot read property 'title' of undefined

위와 같은 오류가 납니다.

즉 원인은 PostsListComponent가 아니라 PostsSingleComponent를 렌더링하는 시점에 this.props에 document라는 속성이 생기지 않았고 그 상태에서 document.title에 접근하고자 하였기 때문입니다.
Swift나 Coffeescript 같은 곳엔 optional 혹은 existential operator라고 불리는 연산자가 있어서 해당 속성 뒤에 ?를 써놓으면 미리 존재여부를 검사할 수 있는데 현재 ECMA6/7에선 지원하지 않습니다.

그렇다면 withDocument로부터 데이터가 다 불러졌는지 알려면 어떻게 해야할까요?

http://docs.vulcanjs.org/data-loading.html#withDocument를 보면 Document말고 loading이라는 속성이 있습니다. 로딩 여부를 반환하는 속성입니다. 이것을 이용합니다.

보통 로딩 시에 로딩 에니메이션을 화면에 보여주는데 화면이 번쩍하는게 싫으니 그냥 빈  <div />를 잠시 노출하도록 합니다.

import React, { Component } from 'react';
import { Link } from 'react-router';
import { registerComponent, withDocument } from 'meteor/vulcan:core';
import Posts from "../modules/posts/collection.js";
class PostsSingleComponent extends Component {
  render () {
    return (
      this.props.loading &&
      <div />
      ||
      <div>
          <h1>{this.props.document.title}</h1>
          <pre>
            {this.props.document.body}
          </pre>
          <Link to='/'>to Home</Link>
      </div>
    );
  }
}
registerComponent('PostsSingleComponent', PostsSingleComponent, [withDocument, {
  collection: Posts
}]);
export default PostsSingleComponent;

더 이상 오류가 발생하지 않습니다.

비동기 상황은 꼼꼼하게 점검해서 오류를 막아주도록 합시다.

다음은 수정과 삭제에 대해 알아보록 하겠습니다.